:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#202219;background:#eeeee6}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;gap:20px;padding:24px 32px;border-bottom:1px solid #c6c7bb;font-size:11px;letter-spacing:.09em}a{color:inherit}header a{font-weight:900;text-decoration:none}.intro{padding:56px 32px 40px}.eyebrow{font-size:10px;letter-spacing:.12em}h1{font-size:clamp(52px,8vw,108px);letter-spacing:-.07em;line-height:.95;margin:22px 0}.intro>p:last-child{font-size:15px;line-height:1.5;color:#63665b}.stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:38px 24px;gap:16px}.stage-meta,.stage-foot{width:min(100%,680px);display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.08em}.stage-foot{color:#626558}#art-frame{position:relative;flex:none}#paper{position:absolute;left:0;top:0;transform-origin:0 0;perspective:2400px;perspective-origin:50% 50%;transform-style:preserve-3d}.panel{position:absolute;left:0;top:0;width:100%;transform-origin:50% 0;background-repeat:no-repeat;backface-visibility:hidden;will-change:transform;overflow:hidden}.shade{display:none}.guide{position:absolute;left:0;right:0;border-top:2px dashed #00ffcf;pointer-events:none;display:none;transform:translateZ(1px)}.guide:before{content:attr(data-label);position:absolute;left:8px;top:4px;font:bold 18px monospace;background:#00ffcf;color:#111;padding:4px 8px}.show-guides .guide{display:block}footer{padding:64px 32px 150px;border-top:1px solid #c6c7bb;display:flex;justify-content:space-between;gap:20px;font-size:13px}.controls{position:fixed;right:22px;bottom:22px;width:280px;background:#fafaf4;border:1px solid #bcbfb1;box-shadow:0 8px 32px #20221915;z-index:10;max-height:calc(100svh - 44px);overflow:auto}.controls summary{cursor:pointer;padding:16px;list-style:none;font-size:13px;font-weight:bold;display:flex;justify-content:space-between}.controls summary::-webkit-details-marker{display:none}.controls[open] summary span{transform:rotate(45deg)}form{padding:0 16px 16px}form p{font-size:11px;line-height:1.45;color:#676b5e;margin:0 0 16px}label{display:block;font-size:11px;margin-bottom:14px}input[type=number],select{display:block;width:100%;padding:8px;margin-top:6px;border:1px solid #bcbfb1;background:white;color:#202219;border-radius:0;font:inherit;font-size:16px}.crease-inputs{display:flex;gap:8px}.crease-inputs label{min-width:0;flex:1}input[type=range]{width:100%;margin:12px 0 0;accent-color:#394927}#speed-label{float:right}.check{display:flex;align-items:center;gap:8px}input[type=checkbox]{accent-color:#394927}.buttons{display:flex;gap:8px}button{flex:1;cursor:pointer;padding:9px;border:1px solid #bcbfb1;background:transparent;color:inherit}button:last-child{background:#27341d;color:#f5f5e8;border-color:#27341d}#error{color:#a52c17;margin-bottom:8px}#error:empty{display:none}:focus-visible{outline:2px solid #70893c;outline-offset:3px}@media(min-width:1100px){.stage{padding-right:320px}}@media(max-width:600px){header{padding:20px 16px;font-size:9px}.intro{padding:36px 16px 28px}.stage{padding:30px 16px 76px;gap:12px}.controls{right:12px;bottom:12px;width:min(280px,calc(100vw - 24px))}.stage-meta,.stage-foot{font-size:8px}footer{padding:40px 16px 100px}}

/* Fixed outside the sticky stage so the eye stays at the top after docking. */
#eye-button{position:fixed;left:0;top:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:9;transform-origin:0 0;will-change:transform,width,height;touch-action:pan-y;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
#eye-button[hidden]{display:none}
#eye-button:disabled{cursor:default;pointer-events:none}
#eye-button img{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
#eye-button img[hidden]{display:none}
#eye-button:focus-visible{outline:2px dashed #394927;outline-offset:5px}