#sheet { max-height:calc(100dvh - 100px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow-y:auto; touch-action:pan-y; }
#bar { max-width:calc(100vw - 16px); }
#bar .btn { flex-shrink:1; min-width:0; }
#demo-open { width:100%; margin-top:13px; font-family:var(--kai); font-size:17px; }
#demo-panel { margin:auto; width:min(440px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:24px; color:var(--ink-ui); background:#f8f4ec; border:1px solid #bcb09b; border-radius:20px; box-shadow:0 16px 60px #28201433; touch-action:pan-y; }
#demo-panel::backdrop { background:#28201466; backdrop-filter:blur(4px); }
#demo-panel h2 { margin:0; font:24px var(--kai); }
#demo-panel .demo-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#demo-panel button, #demo-player button { min-height:44px; padding:8px 12px; border:1px solid #5a504229; border-radius:10px; background:#fbf8f1; color:var(--ink-ui); font:15px var(--kai); cursor:pointer; }
#demo-panel p { margin:8px 0 20px; color:#746959; font-size:13px; line-height:1.7; }
#demo-panel label { display:block; margin:16px 0 8px; font-size:14px; }
#demo-list { width:100%; resize:vertical; min-height:100px; max-height:180px; padding:12px; border:1px solid #bcb09b; border-radius:10px; background:#fffdf8; color:var(--sumi); font:20px/1.6 var(--kai); user-select:text; touch-action:auto; }
#demo-panel input[type=range] { width:100%; accent-color:var(--zhu); touch-action:pan-x; }
#demo-panel .demo-scale { display:flex; justify-content:space-between; color:#746959; font-size:12px; }
#demo-count, #demo-error { font-size:13px; line-height:1.6; margin-top:6px; }
#demo-count { color:#746959; }
#demo-error { color:#a03720; min-height:21px; }
#demo-panel #demo-start { width:100%; margin-top:12px; background:var(--zhu); color:#fff8ee; border-color:transparent; }
#demo-player { position:fixed; z-index:6; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom,0px) + 80px); width:min(490px,calc(100vw - 24px)); display:flex; align-items:center; gap:5px; padding:7px; background:#f8f4ecf5; border:1px solid #5a504229; border-radius:14px; box-shadow:0 5px 20px #28201420; }
#demo-player[hidden] { display:none; }
#demo-status { flex:1; min-width:0; padding:0 5px; color:#655a4b; font-size:12px; line-height:1.6; }
#demo-status b { display:block; color:var(--zhu); font:18px var(--kai); }
#demo-player button { padding:8px; font-size:14px; flex-shrink:0; }
body.demo-mode #ink, body.demo-mode #live { visibility:hidden; }
body.demo-mode #b-save, body.demo-mode #b-undo { opacity:.35; pointer-events:none; }
#demo-panel :focus-visible, #demo-player :focus-visible, #demo-open:focus-visible { outline:2px solid var(--zhu); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { #sheet { transition:none; } }