:root { --bg:#1C1D20; --surface:#26272B; --border:rgba(255,255,255,.12); --text:#E8E8E6; --text-dim:#9C9C98; --ok:#4EA86A; --accent:#FFD23F; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:13px Pretendard,Arial,sans-serif;overscroll-behavior:none}
body.overlay-shell{background:transparent}
body.overlay-shell #canvas{background:transparent}
body.overlay-shell #share,body.overlay-shell output{display:none}
body.overlay-shell .rail{opacity:.18;transition:opacity .15s}
body.overlay-shell .rail:hover,body.overlay-shell #palette:hover{opacity:1}
body.overlay-shell #palette{opacity:.18;transition:opacity .15s}
#setup{max-width:420px;margin:12vh auto;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.product-kicker{margin:0 0 8px;color:var(--accent);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
#setup h1{margin:0 0 12px;font-size:28px;line-height:1.08;letter-spacing:-.04em}
.pair-box{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
input,button,textarea{font:inherit}
input{display:block;width:100%;margin:8px 0 16px;padding:12px;border-radius:8px;border:1px solid var(--border)}
button{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
button.active{outline:2px solid var(--ok)}
.setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.button-link{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.button-link.primary{background:var(--accent);color:#191A1F;border-color:transparent;font-weight:800}
#canvas{position:fixed;inset:0;z-index:0;touch-action:none;cursor:crosshair}
#canvas.hand-mode{cursor:grab}
#canvas.panning{cursor:grabbing}
.rail{position:fixed;bottom:24px;left:24px;display:grid;grid-template-columns:repeat(4,52px);gap:8px;z-index:10}
#palette{position:fixed;left:24px;top:24px;z-index:10;display:grid;grid-template-columns:repeat(4,32px);gap:8px;padding:8px;background:rgba(38,39,43,.94);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(8px)}
.swatch{min-width:32px;min-height:32px;width:32px;height:32px;border-radius:999px;border:2px solid rgba(255,255,255,.2);padding:0}
.swatch.active{outline:2px solid #fff}
output,#share{position:fixed;z-index:10;background:rgba(38,39,43,.94);border:1px solid var(--border);border-radius:10px;padding:8px 12px;backdrop-filter:blur(8px)}
output{right:24px;top:24px;color:var(--text-dim)}
#trial{position:fixed;right:24px;top:64px;z-index:10;display:flex;align-items:center;gap:8px;background:rgba(38,39,43,.94);border:1px solid var(--border);border-radius:10px;padding:8px 12px;backdrop-filter:blur(8px);font-size:12px}
#trial a{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-radius:7px;background:var(--accent);color:#191A1F;font-weight:800;text-decoration:none}
#trial.expired{border-color:#FF5C4D}
#trial.expired #trial-clock{color:#FF9B91;font-weight:800}
#nav{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:6px;padding:8px;background:rgba(38,39,43,.94);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(8px)}
#nav button{min-width:40px;min-height:36px}
#zoom-label{min-width:48px;text-align:center;color:var(--text-dim)}
#share{right:24px;bottom:24px;max-width:380px;display:grid;gap:6px;font-size:11px}
#share button{min-height:32px}
.pairing-row{display:flex;align-items:center;gap:10px}
#pairing-code{min-width:132px;font-size:30px;letter-spacing:.12em;font-weight:800;color:#fff}
#toggle-code{min-width:88px;padding:0 10px;white-space:nowrap}
#pairing-hint{color:var(--text-dim);line-height:1.35}
a{color:#4EA8FF;overflow-wrap:anywhere}
.text-editor{position:absolute;z-index:20;min-width:180px;min-height:48px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(28,29,32,.92);outline:2px solid var(--ok);resize:both}
.viewer output{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
#replay-controls{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:var(--surface);padding:8px;border:1px solid var(--border);border-radius:14px}
#timeline{width:300px}
#native-cursor{position:fixed;left:0;top:0;z-index:30;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;border:2px solid #FFD23F;border-radius:999px;box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 20px rgba(255,210,63,.5);transform:translate(-9999px,-9999px)}
#native-cursor::before,#native-cursor::after{content:"";position:absolute;background:#FFD23F;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
#native-cursor::before{left:50%;top:-7px;width:2px;height:46px;transform:translateX(-50%)}
#native-cursor::after{top:50%;left:-7px;width:46px;height:2px;transform:translateY(-50%)}
#native-cursor.drawing{border-color:#FF5C4D;box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 22px rgba(255,92,77,.55)}
#native-cursor.drawing::before,#native-cursor.drawing::after{background:#FF5C4D}
@media(max-width:700px){
  .rail{grid-template-columns:repeat(4,44px);bottom:10px;left:10px;max-height:176px;overflow:auto}
  #palette{left:10px;top:54px;grid-template-columns:repeat(8,28px)}
  .swatch{min-width:28px;min-height:28px;width:28px;height:28px}
  button{min-width:40px;min-height:40px;padding:4px}
  output{top:10px;right:10px}
  #trial{top:52px;right:10px;left:10px;justify-content:space-between}
  #nav{left:auto;right:10px;bottom:10px;transform:none;max-width:210px}
  #nav button{min-width:34px}
  #share{left:auto;right:10px;bottom:62px;max-width:210px;max-height:128px;overflow:auto}
}