:root{font-family:var(--ui-font);--bg:var(--ui-bg);--surface:var(--ui-surface);--surface2:var(--ui-raised);--text:var(--ui-text);--muted:var(--ui-muted);--line:var(--ui-border);--accent:var(--ui-accent);--accent-ink:var(--ui-on-accent);--canvas:var(--ui-bg);--shadow:var(--ui-shadow);--ui-overlay-top:calc(var(--ui-safe-top) + 84px);--ui-overlay-bottom:calc(var(--ui-safe-bottom) + 84px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{border:0;cursor:pointer;color:inherit;background:none;border-radius:10px;transition:background .15s,transform .15s}button:hover{background:var(--surface2)}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:wait}a{color:var(--accent)}input,select,textarea{color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:11px;width:100%}input[type=range]{accent-color:var(--accent);padding:0;border:0}input[type=color]{padding:3px;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer}textarea{resize:vertical;min-height:90px}h1,h2,h3,p{margin:0}h2{font-size:21px;letter-spacing:-.6px}h3{font-size:14px}small{font-size:11px;color:var(--muted)}[hidden]{display:none!important}.glass{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px)}#studio{height:100dvh;overflow:hidden;position:relative}#canvas,#cursors{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#canvas{cursor:crosshair}#cursors{pointer-events:none}.topbar{position:absolute;top:max(20px,env(safe-area-inset-top));left:20px;right:20px;height:64px;border-radius:17px;display:flex;align-items:center;gap:20px;padding:0 20px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font-size:26px;font-weight:750;letter-spacing:-1.4px}.brand svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.brand-dot{color:var(--accent)}.divider{height:24px;width:1px;background:var(--line);flex-shrink:0}.board-title{font-size:13px;padding:10px 0;font-weight:600}.board-title span{color:var(--muted);margin-left:12px}.status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.status i,#version i{display:inline-block;width:5px;height:5px;background:#a7d6b6;border-radius:50%}.topbar-end{margin-left:auto;display:flex;gap:15px;align-items:center}.quiet{border:1px solid var(--line);padding:10px 16px;font-size:12px}.quiet span{margin-left:20px;color:var(--accent)}.avatar{border-radius:50%;width:34px;height:34px;background:var(--accent);color:var(--accent-ink);font-weight:700}.rail{position:absolute;top:104px;left:20px;width:70px;border-radius:17px;padding:9px 7px;display:flex;align-items:center;flex-direction:column;gap:5px}.rail button{width:54px;min-height:61px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.rail button>span{font-size:25px;height:27px;line-height:26px}.rail button small{font-size:9px}.rail button.active{background:var(--surface2);color:var(--accent)}.rail button.active small{color:var(--accent)}.rail-rule{width:28px;height:1px;background:var(--line);margin:8px}.panel{position:absolute;top:104px;left:104px;width:274px;max-height:calc(100dvh - 192px);overflow:auto;border-radius:17px;padding:22px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.panel-head button{font-size:20px;color:var(--muted);padding:0 4px}.subtext{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0 20px}.section-label,.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--muted);font-weight:700}.section-label{display:block;margin:25px 0 12px}.brush-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.brush-card{border:1px solid var(--line);padding:13px 6px;display:flex;align-items:center;flex-direction:column;gap:9px}.brush-card.active,.ink-card.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}.brush-mark{height:23px;width:54px;position:relative}.brush-mark:after{content:"";display:block;background:var(--accent);height:9px;width:48px;border-radius:100%;transform:rotate(-13deg);position:absolute;top:7px}.brush-mark.pencil:after{height:3px;top:12px}.brush-mark.spray:after{height:18px;filter:blur(5px)}.brush-mark.ribbon:after{border-radius:2px;height:14px;transform:skewY(-13deg)}.brush-mark.eraser:after{background:var(--muted);width:24px;height:18px;border-radius:4px;left:10px}.brush-card small{color:var(--text);font-size:11px}.range-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:12px}.range-head output{color:var(--muted);font-size:11px}.brush-preview{height:65px;border-radius:10px;background:var(--surface2);display:grid;place-items:center;margin-top:22px;overflow:hidden}.brush-preview span{width:150px;height:18px;background:var(--accent);border-radius:90% 30% 70% 40%;transform:rotate(-8deg)}.color-row{display:flex;gap:8px;align-items:center}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent}.swatch.active{border-color:var(--text)}.ink-list{display:flex;flex-direction:column;gap:7px}.ink-card{display:flex;gap:11px;padding:10px;text-align:left;align-items:center;border:1px solid var(--line);width:100%}.ink-art{display:block;width:37px;height:37px;border-radius:10px;flex-shrink:0;background:radial-gradient(ellipse at 25% 20%,#fff9,transparent 50%),linear-gradient(130deg,var(--ink),#171729);box-shadow:inset 0 0 18px #ffffff24}.ink-copy{display:flex;flex-direction:column;gap:4px}.ink-copy strong{font-size:12px;font-weight:550}.ink-copy small{font-size:10px}.ink-price{margin-left:auto;font-size:10px;color:var(--accent)}.welcome{position:absolute;left:calc(50% + 75px);top:47%;transform:translate(-50%,-50%);width:420px;pointer-events:none}.welcome .eyebrow{color:#a7a1b7;font-size:9px}.welcome h1{font-size:clamp(46px,5vw,78px);font-weight:450;line-height:1.04;letter-spacing:-4px;margin:24px 0}.welcome h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.welcome p{line-height:1.9;font-size:13px;color:var(--muted);margin-bottom:27px}.primary{background:var(--accent);color:var(--accent-ink);padding:13px 16px;font-weight:650;font-size:12px}.primary:hover{background:color-mix(in srgb,var(--accent) 85%,white)}.primary span{margin-left:22px}.welcome button{pointer-events:auto}.welcome>small{display:block;margin-top:20px;font-size:10px}.bottom-left{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:20px;border-radius:12px;display:flex;padding:4px;gap:4px}.bottom-left button{font-size:10px;padding:9px 10px;color:var(--muted)}#version i{margin-left:7px}kbd{font:9px inherit;border:1px solid var(--line);border-radius:4px;padding:2px 4px;margin-left:6px}.toolbar{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;border-radius:15px;padding:7px}.toolbar button{height:37px;min-width:36px;font-size:22px}.toolbar button.selected{background:var(--surface2);color:var(--accent)}.toolbar .divider{height:20px;margin:0 5px}.toolbar #quick-size{font-size:12px;min-width:47px}.zoom{position:absolute;right:20px;bottom:max(20px,env(safe-area-inset-bottom));padding:5px;border-radius:12px;display:flex;align-items:center}.zoom button{padding:8px 11px;font-size:16px}#zoom-value{font-size:11px;color:var(--muted)}.toast{position:absolute;bottom:90px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;max-width:min(90vw,520px);box-shadow:var(--shadow);font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}.toast.show{opacity:1;transform:translateX(-50%)}.update{position:absolute;top:95px;right:20px;box-shadow:var(--shadow)}dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px;width:min(440px,92vw);box-shadow:0 25px 100px #0007}dialog::backdrop{background:#06081199;backdrop-filter:blur(7px)}.dialog-close{position:absolute;top:12px;right:12px;font-size:23px;color:var(--muted);width:30px;height:30px}dialog h2{padding-right:20px}dialog p{font-size:13px;line-height:1.8;color:var(--muted);margin:15px 0}dialog form{display:grid;gap:12px}label{display:block;font-size:12px}label input,label textarea,label select{margin-top:7px}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.stack{display:grid;gap:10px}.board-card{padding:14px;border:1px solid var(--line);text-align:left;border-radius:11px;display:flex;flex-direction:column;gap:6px;width:100%;margin-top:8px}.board-card strong{font-size:12px}.board-card.active{border-color:var(--accent)}.pin{font-variant-numeric:tabular-nums;font-size:30px;letter-spacing:9px;text-align:center;padding:20px;background:var(--surface2);border-radius:12px;margin:20px 0;color:var(--accent)}.person{display:flex;align-items:center;gap:9px;margin:15px 0}.person .person-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;font-size:12px}.person button{font-size:10px;padding:7px;background:var(--surface2)}.person .avatar{display:grid;place-items:center;font-size:11px;flex-shrink:0}.tag{font-size:9px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--accent)}.lab-art{height:120px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:50px;font-family:Georgia,serif;color:var(--accent);margin-bottom:12px}.lab-art.title{font-size:40px;letter-spacing:-2px}.lab-card{border-bottom:1px solid var(--line);padding:20px 0}.lab-card p{font-size:11px;color:var(--muted);line-height:1.7;margin:8px 0}.lab-card .row button{font-size:10px;border:1px solid var(--line);padding:8px}.lab-card .row button.voted{background:var(--accent);color:var(--accent-ink)}.lab-card input{margin:10px 0}.theme-select{margin-top:20px}.cursor{position:absolute;left:0;top:0;display:flex;gap:5px;align-items:center;transition:transform .065s linear;will-change:transform;color:var(--cursor);font-size:18px}.cursor .avatar{width:24px;height:24px;font-size:9px;background:var(--cursor);color:#10131a;overflow:hidden}.cursor img{width:100%;height:100%;object-fit:cover}.cursor small{color:var(--text);background:var(--surface);padding:4px 7px;border-radius:6px;max-width:100px;overflow:hidden;text-overflow:ellipsis}.empty{padding:18px 0;color:var(--muted);font-size:12px;line-height:1.8}.danger{color:#f4a4a4}.full{width:100%}.notice{font-size:11px;color:var(--muted);line-height:1.7;background:var(--surface2);padding:12px;border-radius:10px;margin:15px 0}
@media(min-width:1550px){.welcome{left:53%}.panel{width:290px}}
@media(max-width:1000px){.welcome{left:65%;width:300px}.welcome h1{font-size:58px}.status{display:none}.bottom-left #feedback-button{display:none}.toolbar{left:58%}}
@media(max-width:700px){.topbar{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;height:56px;padding:0 12px;gap:10px}.brand{font-size:23px}.brand svg{width:24px}.topbar .divider{display:none}.board-title{font-size:11px;max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-end{gap:7px}.quiet{padding:8px;font-size:11px}.quiet span{display:none}.avatar{width:28px;height:28px}.rail{left:10px;top:80px;width:55px;padding:6px 3px;gap:3px;border-radius:13px}.rail button{width:46px;min-height:51px}.rail button>span{font-size:22px}.rail button small{font-size:8px}.panel{left:75px;top:80px;width:min(274px,calc(100vw - 85px));max-height:calc(100dvh - 165px);padding:19px}.welcome{left:calc(50% + 25px);top:46%;width:245px}.welcome .eyebrow{font-size:7px}.welcome h1{font-size:51px;letter-spacing:-3px}.welcome p{font-size:12px}.welcome>small{max-width:210px;line-height:1.8}.toolbar{left:50%;bottom:max(12px,env(safe-area-inset-bottom));gap:3px;padding:6px}.toolbar button{min-width:31px}.toolbar .divider{margin:0 2px}.bottom-left{bottom:78px;left:10px;background:transparent;box-shadow:none;border:0}.bottom-left button{font-size:9px;padding:5px}.zoom{right:10px;bottom:78px;padding:0;background:transparent;box-shadow:none;border:0}.zoom button{padding:5px 8px}.toast{bottom:122px}.update{top:76px;right:10px;font-size:10px}.welcome:has(~ .toolbar){z-index:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Artifex layout adapter. Shared runtime files in ui/ stay byte-for-byte upstream. */
button.ui-button{min-height:var(--ui-target);min-width:var(--ui-target)}
input:not([type=range]):not([type=color]),select,textarea{font-size:var(--ui-text-md)}
input[type=color]{min-width:var(--ui-target);min-height:var(--ui-target)}
.color-row{flex-wrap:wrap}.swatch{min-width:var(--ui-target);min-height:var(--ui-target)}
.ui-input{--ui-input-padding:11px;--ui-input-radius:var(--ui-radius-md)}
.ui-button{--ui-button-padding:8px;--ui-button-radius:var(--ui-radius-md)}
.primary.ui-button{--ui-button-padding:12px 18px}
.lab-card.ui-card{--ui-card-padding:16px;--ui-card-shadow:none;margin-block:12px}
.rail button.ui-button{flex-shrink:0}
#dialog.ui-sheet{--ui-sheet-width:440px;--ui-sheet-padding:32px;inset-inline:0;inset-block-start:auto}
.dialog-close.ui-button{padding:0}
.glass{backdrop-filter:none}
.danger{color:var(--ui-danger)}
.topbar{left:max(20px,var(--ui-safe-left));right:max(20px,var(--ui-safe-right))}
@media(max-width:700px){
  .topbar{left:max(10px,var(--ui-safe-left));right:max(10px,var(--ui-safe-right))}
  .rail{left:max(10px,var(--ui-safe-left));top:calc(var(--ui-safe-top) + 80px);max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 220px);overflow-y:auto}
  .panel{left:calc(max(10px,var(--ui-safe-left)) + 65px);top:calc(var(--ui-safe-top) + 80px);width:min(274px,calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 85px));max-height:calc(100dvh - var(--ui-safe-top) - var(--ui-safe-bottom) - 220px)}
  .toolbar{max-width:calc(100vw - var(--ui-safe-left) - var(--ui-safe-right) - 12px);gap:0}
  .toolbar .divider{display:none}.toolbar button.ui-button{padding:4px}
  .topbar .board-title{min-width:0;flex:1}.topbar-end{gap:4px}.topbar{gap:6px}
  .topbar .brand{font-size:20px;gap:4px}.topbar .brand svg{display:none}
}