:root{--paper:#eef5f8;--paper-card:#fbfdfd;--ink:#183b52;--muted:#64849a;--line:#bfd4e0;--blue:#5e8faa;--soft-blue:#dcebf3}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{min-height:100%;margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:repeating-linear-gradient(transparent 0 31px,rgba(82,132,161,.07) 32px,transparent 33px),linear-gradient(120deg,#f6fafc,#eaf3f7)}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.page-header{height:56px;padding:0 clamp(18px,4vw,58px);display:flex;align-items:center;gap:16px;border-top:2px solid #31576f;color:#6a8ba0;background:rgba(248,251,253,.72);backdrop-filter:blur(12px);font-size:.7rem;letter-spacing:.15em;text-transform:lowercase}
.page-header a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#355f79;text-decoration:none;font-size:1.15rem;transition:background .2s ease,transform .2s ease}
.page-header a:hover,.page-header a:focus-visible{background:#dceaf2;transform:translateX(-2px);outline:2px solid rgba(82,132,161,.25)}
.drawing-page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:46px 0 70px}
.drawing-intro{margin-bottom:30px}
.eyebrow{margin:0 0 15px;color:#6289a1;font-size:.7rem;letter-spacing:.16em}
.intro-row{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
h1{margin:0;font:400 clamp(2.75rem,6.5vw,5.7rem)/.98 Georgia,"Times New Roman",serif;letter-spacing:-.055em}
h1 em{color:#5588a7;font-style:normal}
.subtitle{max-width:690px;margin:20px 0 0;color:#69889b;font-size:clamp(.85rem,1.4vw,1rem);line-height:1.65}
.live-indicator{flex:0 0 auto;margin-bottom:4px;padding:10px 14px;display:inline-flex;align-items:center;gap:8px;border:1px solid #c2d8e3;border-radius:999px;color:#62889f;background:rgba(249,253,252,.78);font-size:.7rem}
.live-indicator i{width:7px;height:7px;border-radius:50%;background:#d5a05f;box-shadow:0 0 0 4px rgba(213,160,95,.13)}
.live-indicator.is-live{color:#4d806d;border-color:#bdd9ce;background:#f2faf6}
.live-indicator.is-live i{background:#67a489;box-shadow:0 0 0 4px rgba(103,164,137,.14);animation:livePulse 2s ease-in-out infinite}
.live-indicator.is-offline{color:#896c5c;border-color:#dfcec4;background:#fff9f5}
.drawing-board{overflow:hidden;border:1px solid #bed4df;border-radius:22px;background:rgba(252,253,252,.95);box-shadow:0 25px 55px rgba(42,80,103,.13)}
.toolbar{min-height:88px;padding:14px 20px;display:grid;grid-template-columns:auto minmax(360px,1fr) auto;gap:22px;align-items:center;border-bottom:1px solid #cfdee6;background:rgba(249,252,253,.95)}
.tool-group{display:flex;gap:8px;padding-right:18px;border-right:1px solid #d6e2e8}
.tool-button{min-width:70px;height:58px;padding:7px 10px;display:grid;place-items:center;gap:2px;border:1px solid transparent;border-radius:12px;color:#65849a;background:transparent;cursor:pointer}
.tool-button span{font-size:1.35rem;line-height:1}.tool-button small{font-size:.59rem}
.tool-button:hover,.tool-button:focus-visible{background:#eaf3f7;outline:0}
.tool-button.is-active{color:#315f7a;border-color:#bdd4e1;background:#dfeef5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.color-palette{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.color-swatch{width:29px;height:29px;padding:0;border:2px solid #f8fbfc;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(59,91,110,.15);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.color-swatch:hover,.color-swatch:focus-visible{transform:scale(1.12);outline:0}
.color-swatch.is-active{box-shadow:0 0 0 3px #f8fbfc,0 0 0 5px #77a1ba;transform:scale(.92)}
.thickness-control{min-width:170px;color:#7a94a5;font-size:.62rem}
.thickness-control>span{display:block;margin-bottom:7px;text-align:center}
.thickness-control>div{display:grid;grid-template-columns:28px 25px minmax(64px,100px) 28px;gap:5px;align-items:center}
.thickness-control button{height:28px;border:0;border-radius:50%;color:#5a7f95;background:transparent;cursor:pointer;font-size:1rem}
.thickness-control button:hover,.thickness-control button:focus-visible{background:#e4eff4;outline:0}
.thickness-control output{text-align:center;color:#496e85;font-weight:700}
.thickness-control input{width:100%;accent-color:#5e8faa}
.canvas-shell{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#fff;isolation:isolate}
.canvas-shell::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(circle at 20% 30%,#90a6b0 0 .7px,transparent .9px),radial-gradient(circle at 72% 58%,#90a6b0 0 .6px,transparent .8px);background-size:19px 17px,23px 21px;mix-blend-mode:multiply}
.canvas-shell img,.canvas-shell canvas{position:absolute;inset:0;width:100%;height:100%}
.canvas-shell img{z-index:1;display:block;object-fit:contain;user-select:none;pointer-events:none;filter:grayscale(1) contrast(.96)}
.canvas-shell canvas{z-index:2;display:block;cursor:crosshair;touch-action:none}
.canvas-shell canvas[data-tool="erase"]{cursor:cell}
.drawing-status{min-height:42px;margin:0;padding:13px 20px;border-top:1px solid #dbe6eb;color:#7894a5;background:#f8fbfc;font:italic .7rem/1.4 Georgia,serif;text-align:center}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 4px rgba(103,164,137,.13)}50%{box-shadow:0 0 0 7px rgba(103,164,137,.04)}}
@media(max-width:860px){.toolbar{grid-template-columns:auto 1fr}.thickness-control{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:13px}.thickness-control>span{margin:0}.color-palette{justify-content:center}.drawing-page{padding-top:32px}}
@media(max-width:600px){.page-header{height:50px;padding-inline:12px}.drawing-page{width:calc(100% - 16px);padding:28px 0 42px}.intro-row{display:block}.live-indicator{margin-top:18px}.drawing-board{border-radius:16px}.toolbar{padding:12px;grid-template-columns:1fr;gap:13px}.tool-group{justify-content:center;padding:0 0 12px;border-right:0;border-bottom:1px solid #d6e2e8}.tool-button{height:48px;min-width:88px;grid-template-columns:auto auto;justify-content:center}.color-palette{gap:9px}.color-swatch{width:27px;height:27px}.thickness-control{grid-column:auto;flex-wrap:wrap}.thickness-control>div{grid-template-columns:30px 26px minmax(85px,1fr) 30px;width:min(100%,280px)}.canvas-shell{aspect-ratio:3/2}.drawing-status{padding:11px 12px}h1{font-size:clamp(2.5rem,14vw,4rem)}}
@media(prefers-reduced-motion:reduce){.live-indicator.is-live i{animation:none}.page-header a,.color-swatch{transition:none}}