*{box-sizing:border-box}body{margin:0;background:#f6f4ed;color:#293f38;font:14px Arial,sans-serif}header{height:78px;border-bottom:1px solid #dce1d6;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:16px}header a{color:inherit;text-decoration:none;font-weight:bold;letter-spacing:3px;font-size:20px}header small{display:block;font-size:8px;letter-spacing:3px;margin-top:6px}header>span,.eyebrow,.section{font-size:10px;letter-spacing:2px;color:#798b78}button,select{font:inherit;background:#f8f8f1;border:1px solid #d2dbcd;border-radius:6px;color:#354b40;padding:10px;cursor:pointer}button:hover,button.active{background:#e3ead9;border-color:#819778}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd794f;outline-offset:2px}button:disabled{opacity:.4;cursor:wait}main{display:grid;grid-template-columns:310px 1fr}aside{padding:30px 24px;max-height:calc(100vh - 78px);overflow:auto;border-right:1px solid #dce1d6}h1{font:36px/1.05 Georgia,serif;letter-spacing:-1px;margin:15px 0}h1 em{color:#7d8c6b;font-weight:400}p{line-height:1.65}.intro,.hint{font-size:12px;color:#7b887e}.section{padding:25px 0 15px;margin-top:10px;border-top:1px solid #dde1d6}label{display:block;font-size:12px;margin:16px 0 8px}select,input[type=range]{width:100%}input[type=range]{accent-color:#758d65}output{float:right;color:#81917d}.check{display:flex;align-items:center;gap:8px;margin:13px 0}.check input{accent-color:#748b63}.pieces,.order,.pair{display:flex;gap:6px;margin:10px 0}.pieces button,.order button{flex:1;border-top:4px solid var(--color)}.pair button{flex:1;font-size:11px}.primary{background:#3c6455;color:white;width:100%;margin-top:8px}#result{margin:12px 0;background:#e7ecdf;padding:14px;font-size:12px;line-height:1.65;border-left:3px solid #829573;white-space:pre-line}#result.blocked{background:#f4e6db;border-color:#b86c43}details{font-size:11px;line-height:1.6;margin-top:22px;color:#7c887d}summary{cursor:pointer}article{padding:28px;min-width:0}#viewport{height:calc(100vh - 280px);min-height:440px;position:relative;background:#e4e9dd;border-radius:12px;overflow:hidden}#viewport>canvas{width:100%;height:100%;display:block;touch-action:none}.viewhead{position:absolute;top:25px;left:26px;pointer-events:none}h2{font:30px Georgia,serif;margin:10px 0}#stage{font-size:11px;color:#7d8b78}.views{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:5px;white-space:nowrap}.views button{font-size:11px}.bottom{position:absolute;bottom:17px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:9px;color:#788b76;pointer-events:none}.explain{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:27px 6px}h3{font:24px Georgia,serif;margin:10px 0}.explain p{font-size:12px;color:#7b887c;margin:0}
/* Two-column working canvas: only the parameters scroll. */
html,body{height:100%;overflow:hidden}header{height:64px}main{height:calc(100dvh - 64px);display:grid;grid-template-columns:clamp(260px,28vw,360px) minmax(0,1fr);min-height:0}aside{height:100%;max-height:none;min-height:0;overflow-y:auto;padding:22px 22px 36px;overscroll-behavior:contain}article{height:100%;min-height:0;padding:16px;overflow:hidden}#viewport{height:100%;min-height:0}.explain{display:block;padding:0}.explain>div{margin:18px 0}.explain h3{font-size:20px}.views{max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;white-space:normal}.bottom{gap:12px}.viewhead{right:18px}
@media(max-width:850px){header>span{display:none}header{padding:0 16px}main{grid-template-columns:240px minmax(0,1fr)}aside{padding:18px 16px}article{padding:10px}.viewhead{top:18px;left:16px}h2{font-size:24px}.bottom span:last-child{display:none}.views button{padding:8px;font-size:10px}}
@media(max-width:540px){header a{font-size:16px}main{grid-template-columns:180px minmax(0,1fr)}aside{padding:16px 12px}h1{font-size:28px}article{padding:6px}.viewhead{top:14px;left:10px}.viewhead .eyebrow{font-size:8px;letter-spacing:1px}h2{font-size:20px}.bottom{left:10px;right:10px;font-size:8px}.views{bottom:52px;gap:3px}}