:root{font-family:Arial,"Noto Sans SC",sans-serif;color:#171717;background:#f2efe8}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(#c9c3b8 1px,transparent 1px),#f2efe8;background-size:18px 18px}
button,input{font:inherit}
button{cursor:pointer}
header{min-height:310px;padding:35px max(28px,calc((100vw - 1180px)/2));display:grid;grid-template-columns:130px 1fr auto;align-items:start;background:#eb4d37;color:#151515;border-bottom:8px solid #151515}
.stamp{width:105px;height:105px;border:3px solid #151515;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:900;line-height:.8;transform:rotate(-8deg);font-size:20px}
.title span{font:700 11px monospace;letter-spacing:.18em}
.title h1{font-size:clamp(40px,6vw,80px);line-height:.94;letter-spacing:-.07em;margin:35px 0 0;max-width:780px}
.status{font:12px monospace;border:1px solid;padding:8px 10px}
.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#171717}
main{max-width:1180px;margin:auto;padding:0 28px 100px}
.input-panel{margin-top:-42px;background:#171717;color:white;padding:28px 32px;position:relative}
.input-panel label{font:11px monospace;letter-spacing:.15em;color:#bbb}
.input-row{display:flex;margin-top:15px;gap:16px}
.input-row input{flex:1;min-width:0;border:0;border-bottom:2px solid #777;background:transparent;color:#fff;font-size:clamp(26px,5vw,52px);font-weight:900;letter-spacing:.04em;outline:none;text-transform:uppercase}
.input-row input:focus{border-color:#efc94c}
.input-row button,#print{border:0;background:#efc94c;padding:0 24px;font-weight:900}
.input-panel p{font:11px monospace;color:#999;margin:14px 0 0}
.workbench,.lookup,.export{padding-top:70px}
.bar{display:flex;align-items:end;justify-content:space-between;border-bottom:3px solid #171717;padding-bottom:14px}
.bar>div:first-child{display:grid;grid-template-columns:45px auto;column-gap:10px}
.section-no{grid-row:1/3;width:36px;height:36px;display:grid;place-items:center;background:#171717;color:white;font:bold 12px monospace}
.bar h2{margin:0;font-size:26px;letter-spacing:-.04em}
.bar p{margin:3px 0 0;font:11px monospace;color:#716d65}
.controls{display:flex;gap:7px}
.controls button{border:1px solid #171717;background:transparent;padding:9px 12px;font-size:11px}
.controls button:last-child{background:#171717;color:white}
.canvas-wrap{background:#e3dfd5;border:1px solid #aaa49a;overflow-x:auto;min-height:250px;position:relative}
.canvas-wrap:before{content:"DRAG TO REHEARSE";position:absolute;right:14px;top:10px;color:#b5afa4;font:10px monospace}
#stage{display:block;min-width:100%;height:250px;touch-action:none}
#empty{padding:100px;text-align:center;font-weight:bold}
.pose-card{cursor:grab}
.pose-card.dragging{cursor:grabbing}
.playline{display:flex;justify-content:space-between;background:#171717;color:#fff;padding:10px 16px;font:11px monospace}
.playline div b{color:#efc94c;font-size:17px}
.lookup-grid{display:grid;grid-template-columns:1fr 1fr;background:#ded9cd;border:1px solid #9e998f}
.angle-grid{padding:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;border-right:1px solid #9e998f}
.angle-grid button{aspect-ratio:1;border:1px solid #999;background:#eeeae2;position:relative;font:bold 11px monospace}
.angle-grid button.active{background:#efc94c;border:3px solid #171717}
.angle-grid button:after{content:"";width:34%;height:2px;background:#171717;position:absolute;left:50%;top:50%;transform-origin:left;transform:rotate(var(--a))}
.lookup-result{padding:25px;display:grid;place-items:center;text-align:center}
.lookup-result svg{width:170px;height:170px}
.lookup-result p{font:11px monospace}
.lookup-result>strong{font-size:76px;line-height:1}
.lookup-result>span{font:10px monospace;color:#736f66}
.export .bar>button{padding:12px 18px}
.sheet-head{display:flex;justify-content:space-between;border-bottom:2px solid;padding-bottom:10px;margin-bottom:16px}
.sheet-head b{letter-spacing:.15em}
.sheet-head span{font-family:monospace}
.sheet-foot{border-top:1px solid;padding-top:12px;margin-top:20px;font:10px monospace}
#printSheet{background:white;padding:30px;margin-top:18px;box-shadow:5px 5px 0 #171717}
#sheetGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sheet-cell{border:1px solid #aaa;min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sheet-cell svg{width:90px;height:90px}
.sheet-cell b{font-size:18px}
.sheet-cell.space{border-style:dashed}
.sheet-cell.space:after{content:"PAUSE";font:9px monospace;color:#999}
footer{padding:25px;text-align:center;color:#7f7a71;font:10px monospace;letter-spacing:.2em;border-top:1px solid #b5afa5}
@media(max-width:700px){header{padding:24px 18px 75px;grid-template-columns:70px 1fr}
.stamp{width:58px;height:58px;font-size:11px}
.status{display:none}
.title h1{font-size:43px;margin-top:24px}
main{padding:0 14px 60px}
.input-panel{padding:20px}
.input-row{display:block}
.input-row button{width:100%;padding:14px;margin-top:16px}
.bar{align-items:start;gap:12px}
.bar p{max-width:180px}
.controls{flex-direction:column}
.lookup-grid{grid-template-columns:1fr}
.angle-grid{border-right:0;border-bottom:1px solid #999}
.lookup-result{min-height:320px}
#sheetGrid{grid-template-columns:repeat(3,1fr)}
.sheet-cell{min-height:120px}
#printSheet{padding:16px}
}
@media print{body{background:#fff}
header,.input-panel,.workbench,.lookup,.export>.bar,footer{display:none}
.export{padding:0}
main{padding:0;max-width:none}
#printSheet{box-shadow:none;margin:0;padding:10mm}
.sheet-cell{break-inside:avoid}
#sheetGrid{grid-template-columns:repeat(5,1fr)}
}
.canvas-tip{margin:0;background:#d7d2c7;padding:7px 12px;text-align:right;font:9px monospace;color:#716c64}
#poseModal{width:min(500px,90vw);border:3px solid #171717;background:#efc94c;padding:32px;text-align:center;box-shadow:12px 12px 0 #171717}
#poseModal::backdrop{background:rgba(23,23,23,.72)}
#poseModal>button{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:28px}
#poseModal>span{font:10px monospace;letter-spacing:.16em}
#poseModal #modalPose svg{width:270px;height:270px}
#poseModal>strong{display:block;font-size:72px;line-height:.8}
#poseModal>p{font:10px monospace}