:root { --paper:#fdfcf9; --ink:#262623; --tool:#151514; --muted:#96938d; color-scheme:light; font-family:"Noto Sans SC","PingFang SC",system-ui,sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); }
body { overscroll-behavior:none; }
button,input { font:inherit; }
button { border:0; background:none; cursor:pointer; }
button:focus-visible, input:focus-visible, #drawing-surface:focus-visible { outline:2px solid #9b8bd0; outline-offset:5px; }
[hidden] { display:none !important; }
#paper { position:fixed; inset:0; isolation:isolate; }
#paper::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.11' filter='url(%23n)'/%3E%3C/svg%3E"); z-index:4; }
canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
#drawing { transition:opacity .4s; }
#drawing-surface { position:absolute; inset:0; touch-action:none; outline-offset:-8px; }
body.holding #drawing-surface { cursor:none; }
#crayon { position:absolute; z-index:5; width:112px; height:24px; padding:0; transform-origin:2px 12px; will-change:transform; opacity:0; filter:drop-shadow(3px 7px 5px #0003); transition:filter .14s,opacity .25s; touch-action:none; }
#crayon svg { width:112px; height:24px; overflow:visible; }
body.holding #crayon { pointer-events:none; }
body.pressing #crayon { filter:drop-shadow(1px 2px 1px #0004); }
#invitation { position:absolute; margin:0; color:#8c8982; font-size:12px; letter-spacing:2px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 1s; }
body.ready:not(.holding) #invitation { opacity:1; }
#controls { position:fixed; z-index:10; left:50%; bottom:max(28px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100vw - 24px); }
#hint { text-align:center; margin:0 0 16px; font-size:11px; letter-spacing:.7px; color:#9a968f; transition:opacity .3s; white-space:nowrap; pointer-events:none; }
#toolbar { border-radius:40px; background:var(--tool); color:#eeeae3; padding:7px 10px; box-shadow:0 8px 24px #2626231c,0 2px 6px #26262314; user-select:none; border:1px solid #ffffff16; }
#idle-tools,#active-tools { display:flex; align-items:center; gap:3px; min-height:34px; }
.color-tools,.action-tools { display:flex; align-items:center; gap:3px; min-width:0; }
#toolbar button { color:inherit; height:34px; border-radius:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .18s,opacity .18s; }
#toolbar button:hover { background:#ffffff13; }
#toolbar button:active { background:#ffffff20; }
#toolbar button:disabled { opacity:.3; cursor:default; background:none; }
.text-button { gap:10px; padding:0 13px; white-space:nowrap; font-size:12px; letter-spacing:.2px; }
.text-button svg { width:13px; height:13px; opacity:.5; }
.small-arrow { color:#a6a49d; font-size:16px; }
.icon-button { width:34px; padding:8px; }
svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.icon-button svg { width:18px; height:18px; }
#crayon svg { stroke:none; }
.divider { width:1px; height:18px; background:#ffffff23; margin:0 5px; flex-shrink:0; }
#palette { display:flex; align-items:center; gap:1px; padding:0 1px; }
#toolbar .swatch { position:relative; width:31px; height:34px; border-radius:50%; padding:6px; }
.swatch::before { content:""; width:17px; height:17px; background:var(--swatch); border-radius:50%; border:1px solid #ffffff4d; transition:transform .2s; }
.swatch::after { content:""; position:absolute; width:25px; height:25px; border-radius:50%; border:1px solid transparent; transition:border-color .2s; }
.swatch[aria-checked=true]::after { border-color:#eeeae3; }
.swatch:hover::before { transform:scale(1.1); }
.custom-color { position:relative; display:block; width:31px; height:34px; flex-shrink:0; cursor:pointer; border-radius:20px; }
.custom-color span { position:absolute; width:17px; height:17px; left:7px; top:8px; border-radius:50%; background:conic-gradient(#fa717c,#f6d96f,#8ad8b4,#82c9e5,#9c9de9,#d3a3e4,#fa717c); border:1px solid #ffffff60; pointer-events:none; }
.custom-color input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; }
.custom-color.selected { outline:1px solid #eeeae3; outline-offset:-4px; }
.popover { position:absolute; bottom:calc(100% - 20px); left:0; min-width:210px; padding:6px; border:1px solid #e8e5de; background:#fffefa; border-radius:16px; box-shadow:0 12px 36px #26262314,0 2px 6px #26262308; animation:menu-in .16s ease-out; }
.popover button { display:flex; align-items:center; justify-content:space-between; text-align:left; width:100%; padding:12px 13px; border-radius:10px; color:#35352f; font-size:12px; gap:24px; white-space:nowrap; }
.popover button:hover,.popover button:focus-visible { background:#f0eee8; }
.popover button span { color:#a19d94; font-size:11px; }
.popover button[aria-checked=true] span { color:#35352f; }
#more-menu { left:auto; right:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes menu-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) {
  #controls { bottom:max(20px,env(safe-area-inset-bottom)); }
  #toolbar { padding:7px 7px; }
  #toolbar .swatch { width:27px; }
  #palette { gap:0; }
  #active-tools { gap:0; }
  #active-tools .divider { margin:0 3px; }
  #active-tools .text-button { padding:0 9px; font-size:11px; }
  #active-tools .icon-button { width:28px; padding:6px; }
  .custom-color { width:27px; }
  .custom-color span { left:5px; }
  #invitation { font-size:11px; letter-spacing:1px; }
}
@media(max-width:600px) {
  body.holding #controls { width:min(360px,calc(100vw - 24px)); }
  body.holding #toolbar { border-radius:26px; padding:6px 8px; }
  #active-tools { flex-direction:column; gap:3px; }
  .color-tools { width:100%; gap:2px; }
  #palette { flex:1; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:0; }
  #palette::-webkit-scrollbar { display:none; }
  #toolbar #palette .swatch { width:44px; height:44px; flex-shrink:0; }
  #toolbar #palette .swatch::before { width:19px; height:19px; }
  #toolbar #palette .swatch::after { width:29px; height:29px; }
  .custom-color { width:44px; height:44px; }
  .custom-color span { width:19px; height:19px; left:12px; top:12px; }
  #active-tools .desktop-divider { display:none; }
  .action-tools { width:100%; justify-content:center; border-top:1px solid #ffffff14; padding-top:3px; }
  #active-tools .icon-button { width:44px; height:44px; padding:12px; }
  #active-tools .text-button { min-height:44px; padding:0 20px; font-size:12px; }
}
@media(max-height:440px) {
  #controls { bottom:max(12px,env(safe-area-inset-bottom)); }
  #hint,#invitation { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.steam-link { position:fixed; z-index:9; top:max(18px,env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); min-width:72px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; color:#706c65; font-size:12px; text-decoration:none; border-radius:24px; transition:color .2s,background .2s; touch-action:manipulation; }
.steam-link span { font-size:17px; color:#9b978e; }
.steam-link:hover { color:#262623; background:#eeeae3; }
.steam-link:focus-visible { outline:2px solid #9b8bd0; outline-offset:3px; }
@media(max-width:600px) { .steam-link { right:max(12px,env(safe-area-inset-right)); top:max(10px,env(safe-area-inset-top)); } }