*{box-sizing:border-box}body{margin:0;background:#f6f3eb;color:#273f3b;font:16px/1.5 system-ui,sans-serif}main{max-width:1600px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1{font-size:32px;margin:0}h1 span{font-size:17px;font-weight:400;color:#778780}header p{margin:2px 0}small,.tip{color:#778780;font-size:12px}button,input,select{font:inherit}button{border:1px solid #d2d9ca;border-radius:10px;background:#fffdf7;color:#273f3b;padding:9px 14px;cursor:pointer}button:hover{background:#e6efe0}button:disabled{opacity:.5;cursor:default}.primary{background:#346f5b;color:white;border-color:#346f5b}.primary:hover{background:#275443}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}aside{background:#fffdf7;border:1px solid #e1e2d5;border-radius:18px;padding:20px;max-height:calc(100vh - 145px);overflow:auto}h2{font-size:21px;margin:0 0 18px}label{display:block;margin-bottom:14px}label small{display:block}input:not([type=checkbox]),select{display:block;width:100%;background:#fff;border:1px solid #d5ddce;padding:10px;border-radius:8px;margin-top:4px}input[type=checkbox]{accent-color:#346f5b}.toolbar{display:flex;align-items:center;gap:16px;padding:0 0 12px;flex-wrap:wrap}.toolbar label{margin:0}.toolbar strong{margin-right:auto}#viewport{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#c7e7ee;border:1px solid #d3dccd}#stage{position:absolute;inset:0;transition:transform .8s;transform-origin:0 0}#place,#spots,#stagePieces{position:absolute;inset:0;width:100%;height:100%}#spots,#stagePieces{pointer-events:none}.spot{position:absolute;width:13%;height:12%;transform:translate(-50%,-50%);border:2px dashed #fff9dd;border-radius:50%;display:flex;align-items:end;justify-content:center;color:#294b3b;font-size:clamp(8px,1vw,14px)}.spot span{background:#fff9e6dd;border-radius:5px;white-space:nowrap;padding:0 4px;transform:translateY(65%)}.spot.target{border:4px solid #fff06b;background:#ffe87555;box-shadow:0 0 20px #fff590}.piece{pointer-events:auto;position:absolute;width:9%;height:24%;transform:translate(-50%,-88%);display:flex;flex-direction:column;align-items:center;touch-action:none;cursor:grab;user-select:none;border:0;background:transparent;padding:0;transition:left .7s,top .7s;z-index:2}.piece:hover{background:transparent}.piece svg,.piece img{width:100%;height:80%;object-fit:contain;filter:drop-shadow(0 4px 2px #0002)}.piece span{background:#fffaf0e8;padding:0 7px;border-radius:6px;font-weight:600;font-size:clamp(9px,1vw,15px)}.piece.dragging{position:fixed!important;width:90px!important;height:110px!important;transform:translate(-50%,-65%);transition:none;z-index:9999;pointer-events:none}#palette{min-height:128px;display:flex;gap:15px;flex-wrap:wrap;padding:10px 12px;border:2px dashed #d4dbcc;border-radius:14px;background:#efefe3}#palette .piece{position:relative;width:75px;height:100px;transform:none;left:auto!important;top:auto!important}#palette .piece span{font-size:12px}#caption{position:absolute;bottom:12px;left:6%;right:6%;text-align:center;color:white;background:#203c35df;border-radius:12px;padding:12px 18px;font-size:clamp(18px,2vw,32px);pointer-events:none}#caption.reading{font-size:clamp(22px,2.6vw,40px)}#direction{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#fff0b9;border-radius:10px;margin-top:10px}#chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}#chips button{padding:4px 9px;font-size:14px}#chips button[aria-pressed=true]{background:#ddebb9;border-color:#8caa66}.playbar{display:flex;gap:8px;margin:14px 0 3px}#next{flex:1}#beats{padding-left:24px}#beats li{padding:6px;border-radius:6px;cursor:pointer;color:#78847e;font-size:14px}#beats li.active{background:#e5edd5;color:#203c35;font-weight:600}.options label{font-size:14px;margin-bottom:6px}#voiceLabel,#debug{font-size:11px;color:#74817a}#warnings{color:#95632a;font-size:13px}details{font-size:13px;margin-top:14px}#gate{padding:30px}[hidden]{display:none!important}body:has(main:fullscreen){background:#f6f3eb}main:fullscreen{max-width:none;overflow:auto;background:#f6f3eb}.playing .spot:not(.target){opacity:0}@media(max-width:950px){.layout{grid-template-columns:1fr}aside{max-height:none}.piece span{font-size:11px}main{padding:12px}header{align-items:start}h1 span{display:block}}
#viewport{max-width:calc((100vh - 330px) * 16 / 9);margin:auto}#beats li button{border:0;background:transparent;padding:0;text-align:left;color:inherit;font-size:inherit}#beats li.active button{font-weight:600}header h1{line-height:1.2}
#another{font-size:12px;margin-bottom:16px}
#viewport{max-width:calc((100vh - 410px) * 16 / 9)}