@charset "UTF-8";
:root{--paper:#fff;--desk:#f5f5f2;--ink:#292a29;--muted:#7d817b;--line:#e4e5df;--road:#cecfcc;--accent:#e8764c;--soft:#fbede5;--font:"YouYuan","幼圆","Microsoft YaHei","PingFang SC",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{background:var(--desk);color:var(--ink);font:16px var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;min-height:44px}
button:disabled{cursor:default}
button:not(:disabled){transition:background .15s,transform .1s}
button:not(:disabled):active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button svg,[data-icon]>svg{display:block;width:22px;height:22px}
img{display:block;user-select:none;-webkit-user-drag:none}
p,h1,h2,h3{margin:0;text-wrap:pretty}
.app-shell{width:min(1440px,100%);height:100vh;height:100dvh;min-height:360px;margin:auto;display:grid;grid-template-rows:76px minmax(0,1fr) 68px;padding:env(safe-area-inset-top,0px) max(28px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(28px,env(safe-area-inset-left,0px));gap:0}
.header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;gap:10px;align-items:center;min-width:175px}
.brand-mark{width:37px;height:37px;display:grid;place-items:center;background:var(--soft);color:var(--accent);border-radius:12px;transform:rotate(-6deg)}
.brand-mark>svg{width:25px;height:25px}
h1{font-size:22px;letter-spacing:3px;line-height:1.25}
h1 small{display:block;font-size:9px;font-weight:400;letter-spacing:2px;color:var(--muted);margin-top:5px}
.level-selector{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;padding:8px 16px;background:#fff;font-size:14px}
.level-selector:hover{background:#efefea}
.level-selector>b{font-size:18px}.level-selector small{font-size:12px;color:#92968d}.level-selector .chevron>svg{width:14px;height:14px}.level-selector>span:first-child>svg{width:17px;height:17px;color:#8c9485}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:175px}
.quiet-button{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;font-size:13px}
.quiet-button:hover{background:#eaece4}.quiet-button b{font-size:11px;background:#e5e9db;color:#6e795c;border-radius:20px;padding:3px 7px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#6f756a;flex-shrink:0}
.icon-button:hover{background:#e9ece3}
.paper{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 3px 0 #e8e9e2;display:grid;grid-template-rows:35px minmax(0,1fr) 34px;padding:6px 18px 2px;min-height:0;position:relative;overflow:hidden}
.paper-heading{display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:11px;color:#8e9389;letter-spacing:1px}
.paper-note{font-size:10px;color:#a3a79e}
.maze-board{min-height:0;position:relative;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline-offset:-3px}
#drawing-surface{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#drawing-surface>*{pointer-events:none}
#roads-outline,#roads-fill{fill:none;stroke-linecap:round;stroke-linejoin:round}
#roads-outline{stroke:var(--ink)}#roads-fill{stroke:var(--road)}
.ink-line{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.hint-line{fill:none;stroke:#438fab;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 14;opacity:.85}
.start-halo{fill:#fff;stroke:var(--accent);stroke-width:2.5}.start-dot{fill:var(--accent)}
.marker-text{fill:var(--ink);font:700 19px var(--font);paint-order:stroke;stroke:white;stroke-width:4;stroke-linejoin:round}
.tip-ring{fill:#fff;fill-opacity:.88;stroke:var(--accent);stroke-width:3}.tip-center{fill:var(--accent)}
#pen-tip.drawing .tip-ring{fill-opacity:.25}
#pen-tip.blocked .tip-ring{stroke-width:5}
.paper-footer{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:.4px;color:#8b9185;min-width:0}
.ink-sample{width:18px;height:5px;border-radius:99px;background:var(--accent);transform:rotate(-8deg);flex-shrink:0}
.portrait-note{display:none}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.tool-group{display:flex;align-items:center;gap:10px}.tool-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 13px;border-radius:12px;font-size:13px}.tool-button:hover{background:#e9ece3}.tool-button>span:first-child>svg{width:20px;height:20px}
.drawing-tip{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.5px;color:#92978b}.drawing-tip svg{width:18px;height:18px}.save-status{font-size:10px;letter-spacing:.3px;color:#989e90}
dialog{width:min(760px,calc(100vw - 40px));max-height:calc(100dvh - 40px);border:1px solid #e1e3da;border-radius:24px;padding:34px;background:#fdfdf9;color:var(--ink);box-shadow:0 20px 70px #24301b33;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#343b3150;backdrop-filter:blur(4px)}
.dialog-close{position:absolute;right:12px;top:12px;background:#f2f4eb;z-index:2}.dialog-close svg{width:18px;height:18px}
.dialog-eyebrow{font-size:10px;color:#929a85;letter-spacing:2px;margin-bottom:10px}
dialog h2{font-size:26px;line-height:1.4;letter-spacing:1px;padding-right:30px}.dialog-intro{font-size:13px;color:var(--muted);line-height:1.7;margin:12px 0 22px}
.page-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 17px;font-size:13px;color:#727e61}.page-controls button{background:#eef1e6;border-radius:11px;width:44px}.page-controls button:disabled{opacity:.3}.page-controls svg{width:20px;height:20px;margin:auto}
.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.level-card{border:1px solid #dde2d4;border-bottom:3px solid #d4dcc7;border-radius:15px;padding:12px 6px;background:#fff;position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;min-height:105px}
.level-card.current{outline:2px solid #a0b685;outline-offset:2px}.level-card:hover:not(:disabled){background:#f0f5e8}.level-card:disabled{background:#f2f3ed;border-color:#e4e7dc;color:#b0b5a8}.level-card strong{font-size:20px}.level-card .mini-maze{width:65px;height:40px;max-width:90%}.level-card .level-state{position:absolute;right:6px;top:6px;color:#899a75}.level-state svg{width:12px;height:12px}.level-card span:last-child{font-size:9px;color:#8b9282}
.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:21px 12px;padding:8px 0}.sticker{text-align:center}.sticker-shape{aspect-ratio:1;width:88px;max-width:100%;margin:auto;background:#f3e7c9;border:4px solid #fff;outline:1px solid #e4dbc0;border-radius:45% 48% 42% 45%;position:relative;box-shadow:0 3px 0 #ded9c3;transform:rotate(-5deg)}.sticker:nth-child(2n) .sticker-shape{background:#e3ebd0;transform:rotate(5deg)}.sticker:nth-child(3n) .sticker-shape{background:#e9dfd0}.sticker-shape img{width:84%;height:84%;position:absolute;left:8%;top:6%}.sticker-shape b{position:absolute;bottom:-3px;right:-2px;width:24px;height:24px;display:grid;place-items:center;background:#e7b179;border:2px solid white;border-radius:50%;font-size:9px;color:#684623}.sticker>span{font-size:10px;display:block;margin-top:12px;color:#8a9280}.sticker.locked .sticker-shape{box-shadow:none;background:#f1f2eb;border:2px dashed #d4dcc9;outline:0}.sticker.locked img{filter:grayscale(1);opacity:.15}.sticker.locked .sticker-shape:after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#b1bba4}
.success-view{text-align:center;padding:10px 0 3px}.success-view h2{padding:0;font-size:29px}.success-sticker{width:155px;height:155px;position:relative;background:#eaf0d8;border:6px solid white;outline:1px solid #dbe3ce;border-radius:44% 48% 43% 47%;margin:22px auto 24px;transform:rotate(-5deg);box-shadow:0 6px 0 #d9e0cb;animation:appear .35s ease-out}.success-sticker img{width:130px;height:130px;margin:5px auto}.success-sticker>b{position:absolute;right:-4px;bottom:-3px;width:38px;height:38px;display:grid;place-items:center;background:#e7ad73;border:4px solid white;border-radius:50%;font-size:13px;color:#6c4a2d}
.success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.primary-button,.secondary-button{padding:12px 21px;border-radius:13px;font-size:15px;min-height:49px;font-weight:700}.primary-button{background:var(--accent);color:white;border-bottom:3px solid #c6643f}.primary-button:hover{background:#ee8961}.secondary-button{background:#edf1e4;color:#6d7e58;border-bottom:3px solid #d3ddc3}.secondary-button:hover{background:#e5ebda}.success-footnote{font-size:10px;color:#99a089;margin-top:20px}.connection-link{display:block;color:#446e83;text-decoration:none;font-size:16px;line-height:1.8;overflow-wrap:anywhere;padding:16px;border-radius:13px;background:#f0f4f3;margin:15px 0}.connection-note{font-size:12px;color:#7c8573;line-height:1.9}.empty-note{padding:20px;background:#f4f1e8;border-radius:13px;font-size:14px;line-height:1.8}
@keyframes appear{from{opacity:0;transform:scale(.8) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(-5deg)}}
@media(min-width:1400px){.app-shell{grid-template-rows:86px minmax(0,1fr) 76px;padding-left:40px;padding-right:40px}.paper{padding:6px 26px 2px}}
@media(max-height:600px) and (orientation:landscape){.app-shell{grid-template-rows:59px minmax(0,1fr) 51px;padding-left:16px;padding-right:16px}.paper{grid-template-rows:25px minmax(0,1fr) 26px;padding:1px 8px}.brand h1{font-size:19px}.brand h1 small{display:none}.paper-heading{font-size:10px}.paper-footer{font-size:10px}.drawing-tip,.save-status{display:none}}
@media(orientation:portrait){.app-shell{grid-template-rows:80px minmax(0,1fr) 76px;padding-left:20px;padding-right:20px}.paper{grid-template-rows:38px minmax(0,1fr) 62px;padding:4px 9px}.paper-footer{flex-wrap:wrap;align-content:center;gap:7px}.portrait-note{display:block;width:100%;text-align:center;font-size:10px;color:#a2a696}.drawing-tip{display:none}.paper-note{display:none}.header{gap:10px}.brand,.header-actions{min-width:0}.brand h1{font-size:20px}.brand small{font-size:8px}.level-selector{padding:7px 10px;gap:7px}.quiet-button{padding:8px}.quiet-button>span:nth-child(2){display:none}.header-actions{gap:4px}.level-selector .chevron{display:none}}
@media(max-width:600px){.app-shell{padding-left:10px;padding-right:10px;grid-template-rows:68px minmax(0,1fr) 60px}.brand{gap:5px}.brand-mark{width:29px;height:29px;border-radius:9px}.brand-mark>svg{width:20px;height:20px}.brand h1{font-size:17px;letter-spacing:1px}.brand h1 small{display:none}.level-selector{font-size:12px;gap:6px;padding:8px}.level-selector>span:first-child{display:none}.level-selector small{font-size:10px}.quiet-button{gap:5px}.quiet-button b{font-size:9px;padding:3px 5px}.icon-button{width:40px}.header-actions{gap:0}.toolbar{gap:3px}.tool-group{gap:3px}.tool-button{font-size:12px;gap:5px;padding:8px}.save-status{font-size:8px;max-width:91px}.paper{border-radius:14px}.paper-heading{font-size:10px;padding:0 5px}.paper-footer{font-size:10px}.level-grid,.sticker-grid{grid-template-columns:repeat(4,1fr);gap:10px}.level-card{min-height:93px}.level-card strong{font-size:17px}.sticker-shape{width:76px}.sticker-grid{gap:21px 12px}dialog{padding:29px 20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog h2{font-size:23px}.dialog-intro{font-size:12px}.connection-link{font-size:14px}}
.fullscreen-exit{display:none}
.canvas-fullscreen .app-shell{width:100%;max-width:none;min-height:0;padding:0;display:block}
.canvas-fullscreen .header,.canvas-fullscreen .toolbar,.canvas-fullscreen .paper-heading,.canvas-fullscreen .paper-footer{display:none}
.canvas-fullscreen .paper{position:fixed;inset:0;display:block;border:0;border-radius:0;box-shadow:none;padding:max(52px,env(safe-area-inset-top,0px)) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.canvas-fullscreen .fullscreen-exit{display:flex;align-items:center;gap:7px;position:fixed;z-index:5;top:max(4px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:13px}
@media(max-width:900px){.drawing-tip{display:none}}
@media(max-width:600px){.save-status{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}