:root{color:#171411;background:#f6f1ea;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Sans,Yu Gothic,Noto Sans JP,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper: #fffdf8;--paper-warm: #fbf7f0;--ink: #171411;--line: #e4dbcf;--line-strong: #2d5b52;--shadow: 0 10px 28px rgb(76 58 40 / 8%)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body,#root{height:100%;margin:0;overflow:hidden}body{min-width:320px;overscroll-behavior:none}button{color:inherit;cursor:pointer;font:inherit;touch-action:manipulation}button:disabled{cursor:default}.app{display:grid;grid-template-rows:minmax(0,3fr) minmax(0,5fr);gap:14px;height:100dvh;min-height:100svh;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));position:relative;background:linear-gradient(90deg,rgb(45 91 82 / .035) 1px,transparent 1px),linear-gradient(0deg,rgb(45 91 82 / .03) 1px,transparent 1px),var(--paper-warm);background-size:22px 22px}.app--complete{display:grid;grid-template-rows:minmax(0,1fr);background:var(--paper-warm)}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;min-height:0;position:relative}.app--complete .gallery{--complete-gallery-padding-top: calc(max(46px, env(safe-area-inset-top)) + 10px) ;--complete-gallery-padding-inline: clamp(16px, 5vw, 30px);--complete-gallery-padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px) ;--complete-paper-gap: clamp(8px, 1.4dvh, 14px);gap:0;height:100%;padding:var(--complete-gallery-padding-top) var(--complete-gallery-padding-inline) var(--complete-gallery-padding-bottom)}.gallery__thread{grid-column:1 / -1;grid-row:1 / -1;align-self:stretch;justify-self:stretch;z-index:0;width:100%;height:100%;opacity:.9;overflow:visible;pointer-events:none}.gallery__thread path{fill:none;stroke:#87a276;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.54;vector-effect:non-scaling-stroke}.start-thread{position:fixed;inset:0;z-index:0;width:100vw;height:100dvh;overflow:visible;pointer-events:none}.start-thread path{fill:none;stroke:#87a276;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;opacity:.54;vector-effect:non-scaling-stroke}.slot{display:grid;min-height:0;place-items:center;aspect-ratio:1;align-self:center;justify-self:center;width:auto;height:100%;max-width:100%;overflow:hidden;border:1px solid transparent;border-radius:2px;background:var(--paper);box-shadow:0 3px 12px #4c3a280a;z-index:1}.slot:nth-of-type(1){grid-area:1 / 1}.slot:nth-of-type(2){grid-area:1 / 2}.slot:nth-of-type(3){grid-area:1 / 3}.slot:nth-of-type(4){grid-area:2 / 1}.slot:nth-of-type(5){grid-area:2 / 2}.slot:nth-of-type(6){grid-area:2 / 3}.slot:nth-of-type(7){grid-area:3 / 1}.slot:nth-of-type(8){grid-area:3 / 2}.slot:nth-of-type(9){grid-area:3 / 3}.slot:nth-of-type(10){grid-area:4 / 1}.slot:nth-of-type(11){grid-area:4 / 2}.slot:nth-of-type(12){grid-area:4 / 3}.app--complete .slot{width:calc(100% - var(--complete-paper-gap));height:calc(100% - var(--complete-paper-gap));aspect-ratio:auto;border:0;border-radius:0;background:var(--paper);box-shadow:0 1px #ffffffbf inset,0 10px 24px #4c3a280f}.app--complete .slot img{object-fit:cover}.slot--active{border-color:#2d5b5238;background:var(--paper);box-shadow:0 0 0 2px #2d5b5214,0 5px 14px #4c3a280f}.slot--just-filled{animation:slot-receive .52s cubic-bezier(.16,1,.3,1)}.slot--just-filled img{animation:drawing-settle .52s cubic-bezier(.16,1,.3,1)}.slot img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.studio{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px}.toolbar__tools{display:flex;align-items:center;gap:8px}.icon-button,.done-button,.menu__panel button{border:1px solid rgb(23 20 17 / 9%);background:#fffdf8c7;box-shadow:0 6px 18px #4a392714}.icon-button{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:2px;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}.icon-button:active{transform:scale(.96)}.icon-button svg{color:#2f2822}.done-button,.menu__panel button{height:38px;padding:0 18px;border-radius:2px}.done-button{min-width:78px;color:#fffaf4;background:#2d5b52;border-color:#2d5b523d;font-weight:650;letter-spacing:0}.done-button:disabled{color:#1714115c;background:#fffdf88c;border-color:#17141114;box-shadow:none}.drawing-canvas{display:block;align-self:start;justify-self:center;width:min(100%,calc(62.5dvh - 92px));max-width:100%;aspect-ratio:1;height:auto;border:1px solid var(--line);border-radius:2px;background:var(--paper);box-shadow:var(--shadow),0 0 0 1px #ffffff6b inset;touch-action:none;cursor:crosshair}.start-kana{position:fixed;top:max(15px,env(safe-area-inset-top));left:15px;z-index:5;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgb(23 20 17 / 7%);border-radius:2px;background:#fffdf8b8;box-shadow:0 8px 22px #4a392712;color:var(--ink);font-family:Hiragino Mincho ProN,Yu Mincho,YuMincho,"Noto Serif JP",ui-serif,serif;font-size:21px;font-weight:600;line-height:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.start-kana span{transform:translateY(1px)}.menu{position:fixed;top:max(12px,env(safe-area-inset-top));right:11px;z-index:5}.menu__trigger{position:relative;width:42px;height:42px;border-color:transparent;background:transparent;box-shadow:none}.menu__trigger[aria-expanded=true]{background:transparent;box-shadow:none}.menu__trigger:focus-visible{outline:none}.menu__trigger:after{content:none}.menu-mark{display:block;width:36px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 0 rgb(255 255 255 / 32%));transform:rotate(-2deg);animation:mendako-float 4.8s ease-in-out infinite;transition:transform .21s cubic-bezier(.16,1,.3,1);-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.menu__trigger:active .menu-mark{animation:none;transform:rotate(-2deg) scale(.92)}.menu__trigger[aria-expanded=true] .menu-mark{animation:none;transform:rotate(0) translateY(-1px)}@keyframes mendako-float{0%,to{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-3px) rotate(1deg)}70%{transform:translateY(-1px) rotate(-1deg)}}@keyframes slot-receive{0%{transform:translateY(7px) scale(.97);box-shadow:0 2px 8px #4c3a280a}68%{transform:translateY(-2px) scale(1.015)}to{transform:translateY(0) scale(1)}}@keyframes drawing-settle{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.menu__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:0;border:0;border-radius:2px;background:transparent;box-shadow:none;opacity:0;pointer-events:none;transform:translate3d(5px,-7px,0) scale(.96);transform-origin:top right;clip-path:inset(0 0 100% 100% round 2px);transition:opacity .19s ease,transform .23s cubic-bezier(.16,1,.3,1),clip-path .23s cubic-bezier(.16,1,.3,1)}.menu__panel--open{opacity:1;pointer-events:auto;transform:translateZ(0) scale(1);clip-path:inset(0 0 0 0 round 2px)}.menu__panel button{width:100%;min-width:152px;border:0;border-radius:2px;color:#fffaf4;background:#2d5b52;box-shadow:0 16px 40px #372a1c38;font-weight:650;letter-spacing:0;text-align:center;white-space:nowrap;transition:background-color .16s ease,transform .16s ease}.menu__panel button:active{transform:scale(.98)}@media(hover:hover){.icon-button:hover{background:#fffdf8f5}.menu__panel button:hover{background:#244a43}}@media(prefers-reduced-motion:reduce){.icon-button,.menu__panel,.menu__panel button,.slot--just-filled,.slot--just-filled img{animation:none;transition:none}.menu-mark{animation:none}}@media(min-aspect-ratio:4 / 5){.app{width:min(100vw,440px);margin:0 auto}}