@import "https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@300;400;500&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--ink-solid:oklch(22% .012 55);--ink-95:oklch(22% .012 55/.95);--ink-85:oklch(22% .012 55/.85);--ink-80:oklch(22% .012 55/.8);--ink-70:oklch(22% .012 55/.7);--ink-60:oklch(22% .012 55/.6);--ink-55:oklch(22% .012 55/.55);--ink-50:oklch(22% .012 55/.5);--ink-45:oklch(22% .012 55/.45);--ink-40:oklch(22% .012 55/.4);--ink-35:oklch(22% .012 55/.35);--ink-20:oklch(22% .012 55/.2);--ink-12:oklch(22% .012 55/.12);--ink-08:oklch(22% .012 55/.08);--ink-06:oklch(22% .012 55/.06);--paper-0:oklch(97% .006 75);--paper-1:oklch(98% .005 75);--paper-2:oklch(93% .006 75);--paper-2-hover:oklch(93% .008 75);--paper-3:oklch(88% .008 75);--paper-4:oklch(89% .008 75);--accent-red:oklch(52% .2 25);--accent-blue:oklch(48% .16 258);--rule-line:oklch(78% .07 240/.4);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--radius-sm:8px;--radius-md:16px;--radius-lg:20px;--radius-xl:24px;--radius-full:999px;--text-2xs:.6875rem;--text-xs:.75rem;--text-sm:.8125rem;--text-md:.9375rem;--text-lg:1.125rem;--text-xl:1.5rem;--duration-fast:.15s;--duration-base:.18s;--shadow-card:0 1px 2px var(--ink-08), 0 4px 14px var(--ink-06);--shadow-popover:0 2px 6px var(--ink-08), 0 18px 48px var(--ink-12);--canvas-shadow:drop-shadow(0 1px 1px var(--ink-06)) drop-shadow(0 2px 6px var(--ink-08))}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink-solid:oklch(92% .006 75);--ink-95:oklch(92% .006 75/.95);--ink-85:oklch(92% .006 75/.85);--ink-80:oklch(92% .006 75/.8);--ink-70:oklch(92% .006 75/.7);--ink-60:oklch(92% .006 75/.6);--ink-55:oklch(92% .006 75/.55);--ink-50:oklch(92% .006 75/.5);--ink-45:oklch(92% .006 75/.45);--ink-40:oklch(92% .006 75/.4);--ink-35:oklch(92% .006 75/.35);--ink-20:oklch(92% .006 75/.2);--ink-12:oklch(92% .006 75/.12);--ink-08:oklch(92% .006 75/.08);--ink-06:oklch(92% .006 75/.06);--paper-0:oklch(38% .006 75);--paper-1:oklch(42% .005 75);--paper-2:oklch(34% .006 75);--paper-2-hover:oklch(36% .008 75);--paper-3:oklch(32% .008 75);--paper-4:oklch(31% .008 75);--rule-line:oklch(78% .07 240/.55)}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink-solid:oklch(92% .006 75);--ink-95:oklch(92% .006 75/.95);--ink-85:oklch(92% .006 75/.85);--ink-80:oklch(92% .006 75/.8);--ink-70:oklch(92% .006 75/.7);--ink-60:oklch(92% .006 75/.6);--ink-55:oklch(92% .006 75/.55);--ink-50:oklch(92% .006 75/.5);--ink-45:oklch(92% .006 75/.45);--ink-40:oklch(92% .006 75/.4);--ink-35:oklch(92% .006 75/.35);--ink-20:oklch(92% .006 75/.2);--ink-12:oklch(92% .006 75/.12);--ink-08:oklch(92% .006 75/.08);--ink-06:oklch(92% .006 75/.06);--paper-0:oklch(38% .006 75);--paper-1:oklch(42% .005 75);--paper-2:oklch(34% .006 75);--paper-2-hover:oklch(36% .008 75);--paper-3:oklch(32% .008 75);--paper-4:oklch(31% .008 75);--rule-line:oklch(78% .07 240/.55)}:root[data-theme=light],:root[data-theme=custom]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}html,body{touch-action:pan-x pan-y;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 38%, var(--paper-0) 0%, var(--paper-2) 55%, var(--paper-4) 100%);-webkit-font-smoothing:antialiased;color:var(--ink-solid);font-family:Noto Sans JP,sans-serif}#app{flex-direction:column;align-items:center;gap:.875rem;height:100dvh;padding:0;display:flex}.app-header{z-index:11;touch-action:pan-x pan-y;justify-content:space-between;align-items:stretch;gap:var(--space-4);width:100%;padding:var(--space-3) var(--space-4);padding-top:calc(12px + env(safe-area-inset-top,0px));transition:opacity .18s;display:flex;position:fixed;top:0;left:0;right:0}.app-header-left{align-items:center;gap:var(--space-5);display:flex}.app-main{flex:1;width:100%;min-height:0;display:flex}.view-panel{justify-content:center;align-items:center;width:100%;display:flex}#canvas-panel{width:100%;padding:var(--space-1);flex-direction:column;display:flex;position:relative}.history-edge-tab{appearance:none;z-index:2;background:var(--paper-2);width:1.5rem;height:3.5rem;color:var(--ink-60);font-size:var(--text-sm);cursor:pointer;box-shadow:var(--shadow-card);border:none;transition:background-color .15s;position:absolute;top:50%;transform:translateY(-50%)}.history-edge-tab:hover{background:var(--paper-3)}.history-edge-tab:disabled{cursor:default;opacity:.35;box-shadow:none}.history-edge-tab:disabled:hover{background:var(--paper-2)}.history-edge-tab-left{border-radius:0 var(--radius-md) var(--radius-md) 0;left:0}.history-edge-tab-right{border-radius:var(--radius-md) 0 0 var(--radius-md);right:0}.history-view{flex:auto;width:100%;min-height:0;position:relative}.history-nav{left:0;right:0;top:var(--app-header-height,60px);z-index:2;padding:0 var(--space-2);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.history-date-label{font-size:var(--text-xs);color:var(--ink-60);white-space:nowrap;background:var(--paper-2);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-1) var(--space-2)}.archive-canvas-wrap{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.history-drop-zone{z-index:25;width:min(30vw,9rem);padding:var(--space-3);text-align:center;background:var(--paper-2);border-left:2px dashed var(--ink-30);box-shadow:var(--shadow-card);pointer-events:none;justify-content:center;align-items:center;transition:transform .2s,background-color .15s,border-color .15s;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.history-drop-zone.is-visible{transform:translate(0)}.history-drop-zone.is-hover{background:var(--paper-3);border-color:var(--ink-60)}.history-drop-zone-label{font-size:var(--text-sm);color:var(--ink-70)}#canvas-wrap{flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}#primary-slot{display:contents}.control-panel-handle{display:none}.control-panel-body{display:contents}.circle-canvas{cursor:crosshair;filter:var(--canvas-shadow);display:block}.archive-canvas{cursor:grab;filter:var(--canvas-shadow);display:block}.archive-canvas:active{cursor:grabbing}.text-editor-overlay{z-index:20;touch-action:pan-x pan-y;appearance:none;resize:none;box-sizing:border-box;padding:var(--space-1) .375rem;text-align:center;background:oklch(98% .005 75/.9);border:1px dashed oklch(22% .012 55/.35);border-radius:6px;outline:none;position:fixed;overflow:hidden}.text-editor-overlay--fixed-bottom{border:1px solid var(--ink-12);border-radius:var(--radius-lg);background:var(--paper-1);box-shadow:var(--shadow-card)}.text-editor-overlay::placeholder{color:oklch(22% .012 55/.35)}.canvas-host{position:relative}.canvas-empty-state{z-index:1;text-align:center;white-space:nowrap;pointer-events:none;flex-direction:column;align-items:center;gap:.625rem;display:flex;position:absolute;transform:translate(-50%,-50%)}.canvas-empty-hint{font-size:var(--text-md);color:var(--ink-45);margin:0;transition-property:opacity;transition-timing-function:ease}.app-footer{z-index:10;touch-action:pan-x pan-y;width:100%;padding:8px 16px calc(var(--space-5) + env(safe-area-inset-bottom,0px));justify-content:center;transition:opacity .18s;display:flex;position:fixed;bottom:0;left:0;right:0}#app.is-zoomed .app-header{opacity:.4}#app.is-editing-text-mobile .app-footer{opacity:0;pointer-events:none}.control-panel{justify-content:center;align-items:center;column-gap:var(--space-5);flex-wrap:nowrap;width:100%;max-width:min(56.25rem,96vw);min-height:4.5rem;display:flex}.toolbar{justify-content:center;align-items:center;gap:var(--space-5);flex-wrap:nowrap;display:flex}.toolbar-tools{align-items:center;gap:1.125rem;display:flex}.toolbar-pill{align-items:center;gap:.375rem;display:flex}.theme-swatch-row{gap:var(--space-2)}.theme-swatch-row .toolbar-swatch{width:2.5rem;height:2.5rem}.toolbar-details{justify-content:center;align-items:center;display:flex}.toolbar-details-card{white-space:nowrap;justify-content:center;align-items:center;gap:.875rem;width:clamp(150px,15vw,200px);display:flex}.control-block{padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--ink-12);background:var(--paper-1);height:4.5rem;box-shadow:var(--shadow-card)}@media (width<=480px){.control-panel{flex-direction:row;align-items:center;gap:clamp(6px,2.5vw,10px);display:flex}.control-panel-body{flex:auto;grid-template-rows:auto auto 0fr;grid-template-columns:1fr;gap:clamp(4px,1.5vw,6px) clamp(6px,2.5vw,10px);min-width:0;transition:grid-template-rows .22s;display:grid}.control-panel-body[data-expanded=true]{grid-template-rows:auto auto 1fr}.toolbar{display:contents}.toolbar-details{grid-row:3;justify-content:center;align-items:center;height:auto;min-height:0;display:flex;overflow:hidden}.toolbar-details-card{gap:clamp(6px,2.5vw,10px);width:100%}.control-panel-handle{touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;grid-area:1/1/auto/-1;justify-content:center;align-items:center;width:100%;height:1.125rem;padding:0;display:flex}.control-panel-handle:before{content:"";border-radius:var(--radius-full);background:var(--ink-20);width:2.25rem;height:.25rem}.toolbar-tools{grid-area:2/1/auto/-1;justify-content:center;gap:clamp(8px,3vw,12px)}.control-block{padding:clamp(4px,1.5vw,6px) clamp(8px,3vw,12px)}#app{gap:clamp(6px,2vw,8px);padding:0}.app-header{padding:clamp(8px,2.5vw,10px);padding-top:calc(clamp(8px, 2.5vw, 10px) + env(safe-area-inset-top,0px))}.app-footer{padding:clamp(4px, 1.5vw, 6px) clamp(8px, 2.5vw, 10px) calc(clamp(2px, 1vw, 4px) + env(safe-area-inset-bottom,0px))}}@media (orientation:landscape) and (height<=500px){.app-header{padding:var(--space-1) var(--space-3);padding-top:calc(4px + env(safe-area-inset-top,0px))}.control-block{height:3.5rem;padding:.25rem var(--space-3)}.toolbar-btn{width:2rem;height:2rem}.toolbar-btn svg{width:1rem;height:1rem}.app-footer{padding:.25rem var(--space-3) calc(.25rem + env(safe-area-inset-bottom,0px))}}.fade-visible{opacity:0;transition:opacity .18s}.fade-visible.is-visible{opacity:1}.icon-anchor{align-items:center;display:flex;position:relative}.icon-popover{padding:var(--space-2) .875rem;border-radius:var(--radius-md);background:var(--paper-1);box-shadow:var(--shadow-card);opacity:0;pointer-events:none;z-index:5;margin-bottom:.625rem;transition:opacity .16s,transform .16s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(6px)}.icon-popover.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.toolbar-btn{appearance:none;border-radius:var(--radius-full);width:2.375rem;height:2.375rem;color:var(--ink-solid);cursor:pointer;opacity:.55;background:0 0;border:none;justify-content:center;align-items:center;transition:background-color .15s,opacity .15s;display:flex;position:relative}.toolbar-btn svg{width:1.25rem;height:1.25rem}.toolbar-btn[data-active=true]{background:var(--paper-2);opacity:1}.toolbar-btn:disabled{cursor:not-allowed;pointer-events:none;filter:grayscale()}.toolbar-btn:disabled:not([data-active=true]){opacity:.3}.tool-tooltip{padding:var(--space-1) .625rem;border-radius:var(--radius-full);font-size:var(--text-2xs);color:var(--ink-85);white-space:nowrap}.toolbar-swatches{align-items:center;gap:.375rem;display:flex}.toolbar-swatches-disabled{opacity:.4;pointer-events:none}.toolbar-swatch{border:2px solid var(--paper-1);width:1.625rem;height:1.625rem;box-shadow:0 0 0 1px var(--ink-20), 0 1px 3px var(--ink-12);cursor:pointer;border-radius:50%;padding:0;position:relative;overflow:hidden}.toolbar-swatch[data-active=true]{box-shadow:0 0 0 1px var(--paper-1), 0 0 0 3px var(--ink-55), 0 1px 3px var(--ink-12)}.toolbar-swatch:disabled{cursor:default;opacity:.4}.toolbar-swatch--custom{background:conic-gradient(oklch(60% .2 25),oklch(75% .18 100),oklch(65% .19 145),oklch(55% .14 230),oklch(50% .2 300),oklch(60% .2 25))}.toolbar-custom-color-popover{background:color-mix(in oklch, var(--paper-1) 85%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:10rem;padding:.625rem .875rem}@media (width<=480px){.toolbar-custom-color-popover.icon-popover{top:auto;left:50%;right:auto;bottom:calc(var(--app-footer-height,100px) + 8px);margin:0;position:fixed;transform:translate(-50%)translateY(6px)}.toolbar-custom-color-popover.icon-popover.is-visible{transform:translate(-50%)translateY(0)}}.theme-hue-slider{appearance:none;width:100%;min-width:7.5rem;height:1.25rem;margin:var(--space-1) 0 0;cursor:pointer;background:0 0}.theme-hue-slider::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(90deg,oklch(75% .15 0),oklch(75% .15 60),oklch(75% .15 120),oklch(75% .15 180),oklch(75% .15 240),oklch(75% .15 300),oklch(75% .15 360));height:.625rem}.theme-hue-slider::-moz-range-track{border-radius:var(--radius-full);background:linear-gradient(90deg,oklch(75% .15 0),oklch(75% .15 60),oklch(75% .15 120),oklch(75% .15 180),oklch(75% .15 240),oklch(75% .15 300),oklch(75% .15 360));height:.625rem}.theme-hue-slider::-webkit-slider-thumb{appearance:none;background:var(--paper-1);border:2px solid var(--ink-solid);width:1.25rem;height:1.25rem;box-shadow:0 1px 3px var(--ink-20);border-radius:50%;margin-top:-.3125rem}.theme-hue-slider::-moz-range-thumb{background:var(--paper-1);border:2px solid var(--ink-solid);width:1.25rem;height:1.25rem;box-shadow:0 1px 3px var(--ink-20);border-radius:50%}.shared-menu-section{padding-top:var(--space-3);border-top:1px solid var(--ink-08)}.shared-menu-section:first-child{border-top:none;padding-top:0}.shared-section-label{font-size:var(--text-2xs);color:var(--ink-45);margin-bottom:.375rem;font-weight:500}.pill-btn:disabled{opacity:.4;cursor:default;pointer-events:none}.pill-btn{appearance:none;background:var(--paper-2);font:inherit;font-size:var(--text-xs);color:var(--ink-85);white-space:nowrap;padding:.3125rem var(--space-3);border-radius:var(--radius-full);cursor:pointer;border:none;font-weight:500;transition:background-color .15s}.pill-btn:hover{background:var(--paper-3)}.settings-trigger{border-radius:var(--radius-full);background:0 0;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;padding:0;display:flex}.settings-trigger svg{flex:none;width:1.375rem;height:1.375rem}.settings-trigger:hover{background:var(--paper-2-hover)}.settings-trigger[data-active=true]{background:var(--paper-3)}.export-row{gap:var(--space-2);display:flex}.export-row-btn{text-align:center;flex:1 1 0}.export-status{margin:var(--space-1) .125rem 0;max-width:12.5rem;font-size:var(--text-2xs);color:var(--ink-50);white-space:normal}.export-status:empty{display:none}.settings-popover{min-width:16.25rem;padding:.875rem var(--space-4);background:color-mix(in oklch, var(--paper-1) 85%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-top:.625rem;margin-bottom:0;inset:100% auto auto 0;transform:translateY(-6px)}.settings-popover .shared-menu-section{border-top:none}.settings-usage-btn{text-align:center;width:100%;display:block}.settings-popover.is-visible{transform:translateY(0)}.info-row{left:0;right:0;bottom:calc(var(--app-footer-height,100px) + 8px);pointer-events:none;justify-content:center;align-items:center;gap:.625rem;min-height:2.125rem;display:flex;position:absolute}.info-row>*{pointer-events:auto}.usage-guide{z-index:41;padding:var(--space-6) var(--space-4);background:color-mix(in oklch, var(--paper-2) 86%, transparent);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.usage-guide-sheet{width:min(42.5rem,100%);max-height:calc(100dvh - 48px);padding:var(--space-4) var(--space-5) var(--space-4);border:1px solid var(--ink-12);background:var(--paper-1);box-shadow:0 2px 6px var(--ink-08), 0 18px 48px var(--ink-12);transition:transform var(--duration-base) ease;border-radius:24px;outline:none;position:relative;overflow-y:auto;transform:translateY(8px)scale(.985)}.usage-guide.is-visible .usage-guide-sheet{transform:none}.usage-guide-sheet--glass{background:color-mix(in oklch, var(--paper-1) 55%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.usage-guide-head{align-items:center;display:flex}.usage-guide-close{appearance:none;border-radius:var(--radius-full);width:2.5rem;height:2.5rem;color:var(--ink-60);cursor:pointer;transition:background-color var(--duration-fast) ease;background:0 0;border:none;flex:none;margin-left:auto;font-size:1.5rem;line-height:1}.usage-guide-close:hover{background:var(--paper-2)}.usage-guide-pages{margin-top:var(--space-2)}.usage-guide-page{justify-content:center;align-items:center;gap:var(--space-2);text-align:center;height:min(620px,100dvh - 200px);min-height:0;padding:var(--space-1) 0;box-sizing:border-box;flex-direction:column;display:flex}.usage-guide-page--compact{height:auto}.usage-guide-page--practice{justify-content:flex-start;padding-top:0}.usage-guide-page-content{align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.usage-guide-page-heading{align-items:center;gap:var(--space-2);display:flex}.usage-guide-marker{border-radius:var(--radius-full);background:var(--paper-1);border:1px solid var(--ink-20);width:2.5rem;height:2.5rem;font-family:Klee One,Noto Sans JP,sans-serif;font-size:var(--text-lg);color:var(--accent-red);justify-content:center;align-items:center;display:flex}.usage-guide-canvas{width:7rem;height:7rem;display:block}.usage-guide-stage-title{font-family:Klee One,Noto Sans JP,sans-serif;font-size:var(--text-lg);margin:0;font-weight:600}.usage-guide-stage-body{font-size:var(--text-sm);max-width:46ch;color:var(--ink-85);margin:0;line-height:1.85}.usage-guide-page-actions{justify-content:center;gap:var(--space-2);display:flex}@media (width<=560px){.usage-guide-marker{width:2rem;height:2rem;font-size:var(--text-md)}.usage-guide-canvas{width:6rem;height:6rem}}.tutorial-sandbox{align-items:center;gap:var(--space-3);width:100%;margin-top:var(--space-1);flex-direction:column;display:flex}.tutorial-sandbox-canvas-wrap{aspect-ratio:1;width:100%;max-width:clamp(160px,100dvh - 420px,360px);position:relative}.tutorial-sandbox-canvas-wrap .canvas-empty-state{display:none}.tutorial-sandbox-message{width:min(100%,56ch);min-height:2.6em;font-size:var(--text-sm);color:var(--ink-85);text-align:center;text-wrap:pretty;margin:0;line-height:1.85}.tutorial-sandbox-actions{justify-content:center;align-items:center;width:100%;min-height:2.125rem;display:flex}@media (width<=560px){.usage-guide{padding:8px;overflow:hidden}.usage-guide-sheet{box-sizing:border-box;border-radius:18px;flex-direction:column;height:min(680px,100dvh - 16px);max-height:none;padding:12px 14px;display:flex;overflow:hidden}.usage-guide-pages{flex:auto;min-height:0;margin-top:4px}.usage-guide-page{gap:var(--space-2);height:100%;padding-bottom:0}.usage-guide-page--practice{justify-content:center;min-height:0}.tutorial-sandbox{gap:var(--space-2);min-height:0;margin-top:0}.tutorial-sandbox-canvas-wrap{flex:0 auto;width:min(100%,clamp(90px,100dvh - 350px,360px));max-width:none}.tutorial-sandbox-message{justify-content:center;align-items:center;height:4.95em;min-height:4.95em;line-height:1.65;display:flex}}@media (width<=900px) and (height<=520px){.usage-guide-page-content{gap:var(--space-2)}.usage-guide-canvas{width:64px;height:64px}.usage-guide-stage-body{font-size:var(--text-xs);line-height:1.5}}.history-drag-ghost{z-index:30;pointer-events:none;opacity:.7;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.first-reset-hint{top:calc(env(safe-area-inset-top,0px) + var(--space-4));z-index:15;max-width:min(90vw,32rem);padding:.5rem var(--space-4);border-radius:var(--radius-full);background:var(--paper-2);box-shadow:var(--shadow-card);color:var(--ink-70);font-size:var(--text-xs);text-align:center;pointer-events:none;margin:0;position:fixed;left:50%;transform:translate(-50%)}