@charset "UTF-8";
:root{--board-bg:#151c2e;--board-pen:#fffef9}.breadcrumbs{display:flex;align-items:center;gap:9px;margin-bottom:42px;color:var(--muted);font-size:13px}.breadcrumbs strong{color:var(--ink)}.board-intro{padding:44px 0 38px}.intro-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.intro-row h1{margin:0;font-size:clamp(43px,5vw,66px);line-height:1.03;letter-spacing:-.07em}.intro-row h1 em{color:var(--blue);font-style:normal}.intro-row>div:first-child>p:last-child{margin:20px 0 0;color:var(--muted);font-size:15px;line-height:1.75}.public-stats{display:flex;align-items:center;gap:10px;padding-bottom:4px;font-size:13px}.public-stats>span,.public-stats button{min-height:44px;display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--ink);background:var(--white)}.public-stats button{font-weight:750}.public-stats button:hover{background:var(--lime)}.public-stats button.liked{background:var(--coral)}
.board-app{width:min(1480px,calc(100% - 32px));height:min(76vh,860px);min-height:610px;margin:0 auto;position:relative;display:flex;flex-direction:column;border:1.5px solid var(--ink);background:var(--board-bg);box-shadow:10px 10px 0 var(--ink);overflow:hidden}.board-toolbar{z-index:4;display:grid;grid-template-columns:auto auto minmax(300px,1fr) auto;background:#f4f2eb;color:#181819;border-bottom:1px solid #181819}.toolbar-group{min-height:92px;display:flex;align-items:center;gap:8px;padding:25px 17px 10px;position:relative;border-right:1px solid rgba(24,24,25,.2)}.group-label{position:absolute;left:17px;top:8px;color:#64615b;font:800 10px monospace;letter-spacing:.12em}.tool-button,.theme-switch button{min-height:42px;padding:0 12px;border:1px solid #181819;background:#fffef9;font-size:13px;font-weight:780}.tool-button b{margin-right:5px;font-size:17px}.tool-button.active,.theme-switch button.active{background:#181819;color:#fff}.tool-button kbd,.fullscreen-button kbd{margin-left:7px}.theme-switch{display:flex}.theme-switch button{min-width:58px}.theme-switch button+button{border-left:0}.color-dots{display:flex;gap:7px;align-items:center}.color-dot{width:34px;height:34px;border:1px solid #181819;border-radius:50%;background:var(--dot);position:relative}.color-dot.active::after{content:"";position:absolute;inset:5px;border:2px solid var(--ring);border-radius:50%}.width-control{margin-left:7px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.width-control input{width:95px;accent-color:#5368ff}.width-control output{min-width:26px;font:800 12px monospace}.toolbar-actions{display:grid;grid-template-columns:repeat(2,1fr)}.toolbar-actions button{min-width:105px;border:0;border-left:1px solid rgba(24,24,25,.2);border-bottom:1px solid rgba(24,24,25,.2);background:#fffef9;font-size:12px;font-weight:780}.toolbar-actions button:hover{background:#d8ef52}.toolbar-actions .fullscreen-button{background:#5368ff;color:#fff}.toolbar-actions .fullscreen-button:hover{background:#181819}kbd{padding:2px 5px;border:1px solid currentColor;border-radius:3px;background:rgba(255,255,255,.16);font:800 10px monospace;box-shadow:0 1px 0 currentColor}
.canvas-wrap{flex:1;min-height:0;position:relative;background:var(--board-bg);transition:background .18s}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}.board-app.cursor-mode .canvas-wrap canvas{pointer-events:none;cursor:default}.board-app.eraser-mode .canvas-wrap canvas{cursor:cell}.empty-hint{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:9px;color:color-mix(in srgb,var(--board-pen) 55%,transparent);transform:translate(-50%,-50%);pointer-events:none;text-align:center}.empty-hint strong{font-size:20px}.empty-hint span{font-size:13px}.empty-hint.hidden{display:none}.mode-indicator{position:absolute;right:17px;bottom:15px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--board-pen) 35%,transparent);color:var(--board-pen);font:800 11px monospace;opacity:.7;pointer-events:none}.show-toolbar{position:absolute;z-index:6;right:16px;top:16px;min-height:45px;padding:0 14px;border:1px solid var(--board-pen);background:var(--board-bg);color:var(--board-pen);font-size:12px;font-weight:800}.board-app.toolbar-hidden .board-toolbar{display:none}.board-app:fullscreen,.board-app.fullscreen-fallback{width:100%;height:100vh;min-height:100vh;border:0;box-shadow:none}.board-app:fullscreen .canvas-wrap,.board-app.fullscreen-fallback .canvas-wrap{min-height:0}
.shortcut-strip{margin-top:58px;border-block:1px solid var(--ink);background:var(--white)}.shortcut-strip>.tool-wrap{min-height:58px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.shortcut-strip span{font-size:12px;font-weight:700}.shortcut-strip kbd{margin-right:5px;background:var(--paper)}.board-guide{padding:100px 0;display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}.section-label{margin:0 0 12px;color:var(--blue);font:800 11px monospace;letter-spacing:.13em}.guide-heading h2,.board-notes h2,.board-faq h2{margin:0;font-size:clamp(31px,4vw,46px);line-height:1.08;letter-spacing:-.06em}.guide-heading>p:last-child{max-width:390px;margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.board-guide ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}.board-guide li{display:grid;grid-template-columns:55px 1fr;gap:10px;padding:22px 0;border-bottom:1px solid var(--line)}.board-guide li>b{color:var(--blue);font:800 12px monospace}.board-guide strong{font-size:18px}.board-guide li p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.board-notes{padding:90px 0;background:var(--lime);border-block:1px solid var(--ink)}.board-notes>.tool-wrap{display:grid;grid-template-columns:.6fr 1.4fr;gap:70px}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.note-grid article{min-height:260px;padding:22px;background:var(--white);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}.note-grid span{color:var(--blue);font:800 11px monospace}.note-grid h3{margin:55px 0 12px;font-size:18px}.note-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.board-faq{padding:100px 0;display:grid;grid-template-columns:.6fr 1.4fr;gap:80px}.board-faq>div:last-child{border-top:1px solid var(--ink)}.board-faq details{border-bottom:1px solid var(--ink)}.board-faq summary{min-height:70px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:16px;font-weight:750}.board-faq summary::-webkit-details-marker{display:none}.board-faq details p{margin:-3px 42px 22px 0;color:var(--muted);font-size:14px;line-height:1.75}.board-toast{position:fixed;z-index:80;left:50%;bottom:25px;padding:13px 18px;background:var(--ink);color:white;box-shadow:5px 5px 0 var(--coral);font-size:13px;transform:translate(-50%,140px);transition:.2s}.board-toast.show{transform:translate(-50%,0)}
@media(max-width:1180px){.board-toolbar{grid-template-columns:1fr 1fr}.toolbar-group{border-bottom:1px solid rgba(24,24,25,.2)}.pen-group{grid-column:1/2}.toolbar-actions{grid-column:2/3}.board-app{height:min(78vh,900px);min-height:700px}}
.board-app.fullscreen-fallback{position:fixed;z-index:100;inset:0;width:100%;height:100vh;min-height:100vh;margin:0;border:0;box-shadow:none}.board-app.fullscreen-fallback .canvas-wrap{min-height:0}body.board-fullscreen-fallback{overflow:hidden}.board-app:fullscreen .fullscreen-button,.board-app.fullscreen-fallback .fullscreen-button{background:var(--coral)}
.board-reading{padding:100px 0;display:grid;grid-template-columns:.62fr 1.38fr;gap:72px}.board-reading>div:first-child>p:last-child{max-width:360px;margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.board-reading h2{margin:0;font-size:clamp(31px,4vw,46px);line-height:1.08;letter-spacing:-.06em}.board-reading .reading-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.board-reading .reading-grid a{min-height:270px;padding:22px;display:flex;flex-direction:column;background:var(--white);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}.board-reading .reading-grid a:hover{background:var(--lime)}.board-reading .reading-grid span{color:var(--blue);font:800 11px monospace}.board-reading .reading-grid h3{margin:48px 0 12px;font-size:19px;line-height:1.45}.board-reading .reading-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.board-reading .reading-grid b{margin-top:auto;padding-top:20px;font-size:13px}
@media(max-width:760px){.board-reading{grid-template-columns:1fr;gap:32px;padding:75px 0}.board-reading .reading-grid{grid-template-columns:1fr}.board-reading .reading-grid a{min-height:210px}.board-reading .reading-grid p{font-size:13px}}
@media(max-width:760px){.toolbar-actions{grid-template-columns:repeat(4,1fr)!important}.toolbar-actions .fullscreen-button{grid-column:1/-1!important;min-height:56px!important;font-size:14px}.toolbar-actions .fullscreen-button span{display:inline!important}}
@media(max-width:760px){.board-intro{padding-top:28px}.breadcrumbs{margin-bottom:35px}.intro-row{align-items:flex-start;flex-direction:column}.intro-row h1{font-size:clamp(40px,12vw,55px)}.intro-row>div:first-child>p:last-child{font-size:14px}.public-stats{width:100%;justify-content:flex-end;flex-wrap:wrap}.board-app{width:100%;height:78vh;min-height:680px;border-inline:0;box-shadow:none}.board-toolbar{grid-template-columns:1fr}.toolbar-group,.pen-group,.toolbar-actions{grid-column:1}.toolbar-group{min-height:82px;overflow-x:auto;padding:24px 13px 8px}.group-label{left:13px}.toolbar-actions{grid-template-columns:repeat(3,1fr)}.toolbar-actions button{min-height:48px;min-width:0}.toolbar-actions button span{display:none}.width-control input{width:78px}.shortcut-strip>.tool-wrap{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:12px 0}.shortcut-strip span{white-space:nowrap}.board-guide,.board-notes>.tool-wrap,.board-faq{grid-template-columns:1fr;gap:35px}.board-guide{padding:75px 0}.note-grid{grid-template-columns:1fr}.note-grid article{min-height:210px}.note-grid h3{margin-top:35px}.board-faq{padding:75px 0}.board-faq summary{font-size:14px}.board-faq details p{font-size:13px}.empty-hint strong{font-size:17px}}