:root{color:#3a2114;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--line:#3a2114;--blue:#34a9e8;--deep-blue:#2288cb;--yellow:#ffd84f;--orange:#ff941f;--pink:#ff648a;--green:#8bd13d;--paper:#fffdf2;--wood:#d99a42;--app-height:100dvh;background:#d9f7ff;font-family:Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 12% 12%,#fff 0 5rem,#0000 5.1rem),radial-gradient(circle at 88% 9%,#fff 0 4.8rem,#0000 4.9rem),linear-gradient(#bcefff,#effcff 58%,#f8fff5)}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;border:0}.app-shell{height:var(--app-height);padding:max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr);display:grid;position:relative;overflow:hidden}html.is-app-fullscreen,html.is-app-fullscreen body,html.is-app-fullscreen #root{background:#d9f7ff;width:100%;height:100%;overflow:hidden}html.is-app-fullscreen .app-shell{z-index:1000;width:100vw;height:var(--app-height);position:fixed;inset:0}.app-menu{bottom:max(.75rem, env(safe-area-inset-bottom));left:max(.75rem, env(safe-area-inset-left));z-index:1100;width:auto;position:fixed}.app-menu[open]{top:max(.75rem, env(safe-area-inset-top));bottom:max(.75rem, env(safe-area-inset-bottom));left:max(.75rem, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr) auto;align-items:end;width:clamp(18rem,38vw - .95rem,34rem);display:grid}.menu-toggle{color:#633814;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#fff7ad,#ffd438);border:.18rem solid #fff;border-radius:1rem;place-items:center;min-height:3.25rem;padding:.45rem 1rem;font-weight:900;line-height:1;list-style:none;display:inline-grid;box-shadow:inset 0 -.22rem #d89a16,0 .22rem .45rem #70421233}.menu-toggle::-webkit-details-marker{display:none}.menu-panel{max-height:calc(var(--app-height) - 5.2rem);background:#fff8d9;border:.24rem solid #c9862f;border-radius:1.1rem;gap:.75rem;margin-bottom:.45rem;padding:.8rem;display:grid;overflow:auto;box-shadow:inset 0 .2rem #fffdf2,0 .35rem 1rem #4d2e1533}.app-menu[open] .menu-panel{border-radius:1.35rem;grid-row:1;align-content:start;width:100%;height:100%;max-height:none;margin:0 0 .5rem}.app-menu[open] .menu-toggle{grid-row:2;justify-self:start}.menu-brand{grid-template-columns:1fr auto;align-items:center;gap:.65rem;display:grid}.menu-brand .logo{text-align:left;justify-self:start}.menu-brand .logo-main{justify-content:start}.menu-brand .logo-letter{border-width:.12rem;border-radius:.55rem;min-width:1.75rem;font-size:1.45rem}.menu-brand .logo-sub{font-size:.72rem}.menu-brand .fullscreen-button{place-items:center;min-height:2.7rem;display:inline-grid;position:static;transform:none}.menu-section{gap:.55rem;display:grid}.menu-section h2{color:#6a3918;margin:0;font-size:1rem;font-weight:900}.menu-section .color-palette,.menu-section .size-panel{border-width:.18rem;border-radius:1rem;box-shadow:0 .2rem #e7b42b}.app-header{grid-template-columns:1fr;align-items:center;gap:0;min-height:4.8rem;display:grid;position:relative}.logo{text-align:center;justify-self:center}.logo-main{justify-content:center;align-items:end;gap:.15rem;display:flex}.logo-letter{text-shadow:0 .12rem #fff;background:#fff;border:.22rem solid #ffb323;border-radius:1.2rem;min-width:3.2rem;padding:.1rem .25rem .25rem;font-size:clamp(2rem,4vw,3.8rem);font-weight:900;line-height:1;transform:rotate(-4deg)}.logo-letter-1,.logo-letter-5{color:#ff7c22}.logo-letter-2{color:#69bd34;transform:rotate(3deg)}.logo-letter-3{color:#2c9be9}.logo-letter-4{color:#f68;transform:rotate(4deg)}.logo-sub{letter-spacing:.08em;margin-top:.15rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.2rem;font-weight:800}.fullscreen-button{color:#fff;text-shadow:0 .08rem #15588e;white-space:nowrap;background:linear-gradient(#7bd7ff,#3294e8);border-radius:1rem;min-height:3rem;padding:.35rem .85rem;font-size:.95rem;font-weight:900;line-height:1.05;display:none;position:absolute;top:50%;right:0;transform:translateY(-50%);box-shadow:inset 0 -.22rem #1f75bd,0 .15rem .3rem #11406a33}.fullscreen-button[aria-pressed=true]{text-shadow:0 .08rem #8c410d;background:linear-gradient(#ffcf67,#ff9229);box-shadow:inset 0 -.22rem #c96315,0 .15rem .3rem #70421233}.play-area{grid-template-columns:minmax(18rem,.9fr) minmax(24rem,1.45fr);gap:1rem;min-height:0;display:grid}.prefecture-card,.canvas-panel,.size-panel,.color-palette{border:.28rem solid var(--yellow);background:linear-gradient(145deg,#fffef8,#fff6ba);border-radius:1.5rem;box-shadow:0 .35rem #e7b42b,0 .7rem 1rem #8a5a1524}.prefecture-card{grid-template-rows:auto minmax(0,1fr) auto auto auto;min-height:0;padding:1.25rem;display:grid;position:relative}.prefecture-title-block{text-align:center}.prefecture-reading,.prefecture-region{margin:0;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:900}.prefecture-region{color:#7b4b1a;font-size:1rem}.prefecture-card h1{margin:.15rem 0;font-size:clamp(2.3rem,4.5vw,3.7rem);line-height:1}.silhouette-wrap{place-items:center;min-height:0;padding:.5rem;display:grid}.prefecture-silhouette{filter:drop-shadow(0 .15rem #3a2114);width:min(100%,30rem);height:min(100%,24rem)}.prefecture-silhouette path{fill:#9cdd43;fill-rule:evenodd;stroke:var(--line);stroke-width:1.8px;vector-effect:non-scaling-stroke}.prefecture-controls{grid-template-columns:repeat(3,1fr);gap:.65rem;display:grid}.prefecture-controls button,.canvas-actions button,.canvas-tool-button{color:#fff;border-radius:1.2rem;min-height:3.4rem;font-size:1.15rem;font-weight:900;box-shadow:inset 0 -.22rem #00000024,0 .2rem .35rem #6f49182b}.pink-button{background:linear-gradient(#ff86a3, var(--pink))}.yellow-button{background:linear-gradient(#ffdf4d,#ffb51f);color:#4b2d12!important}.blue-button{background:linear-gradient(#63c5ff,#2f9dec)}.canvas-tool-actions{grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:.6rem;display:grid}.canvas-tool-button{color:#5b3215;background:linear-gradient(#fff,#ffe8b0);border:.12rem solid #d89129;grid-template-columns:auto 1fr;place-items:center;gap:.35rem;padding:.35rem .55rem;display:grid}.canvas-tool-button.clear-tool{color:#fff;background:linear-gradient(#ff86a3,#ec4f76);border-color:#0000}.canvas-tool-button:disabled{opacity:.5}.canvas-tool-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.3px;width:1.7rem;height:1.7rem}.canvas-tool-button span{white-space:nowrap}.page-badge{color:#6a3918;background:#fff4c9;border-radius:999rem;justify-self:center;min-width:6.5rem;margin-top:.6rem;padding:.25rem 1rem;font-size:1.35rem;font-weight:900}.canvas-panel{background:#dff6ff;border-color:#67c7f1;grid-template-rows:minmax(0,1fr);min-height:0;padding:.75rem;display:grid;box-shadow:0 .35rem #3da2ce,0 .7rem 1rem #18577524}.canvas-paper{background:#fff;border:.18rem solid #36aee8;border-radius:1rem;min-height:0;overflow:hidden;box-shadow:inset 0 0 1.3rem #c6d7dc42}.canvas-paper canvas{touch-action:none;width:100%;height:100%;display:block}.canvas-actions{flex-wrap:wrap;justify-content:flex-end;gap:.65rem;display:flex}.canvas-actions button{background:linear-gradient(#ff86a3,#ec4f76);min-width:8rem}.canvas-actions button:nth-child(2),.canvas-actions button:nth-child(3){color:#5b3215;background:linear-gradient(#fff,#ffe8b0);border:.12rem solid #d89129}.tool-dock{background:repeating-linear-gradient(90deg,#d99a42 0 2.5rem,#e1a955 2.5rem 5rem);border:.3rem solid #c9862f;border-radius:1.5rem;grid-template-columns:auto minmax(16rem,1fr) minmax(18rem,.9fr);align-items:center;gap:1rem;padding:.8rem;display:grid;box-shadow:inset 0 .25rem #f0c06a,0 .35rem #a96922}.color-palette{grid-template-columns:repeat(6,minmax(2.7rem,1fr));gap:.75rem;padding:.9rem;display:grid}.color-swatch{aspect-ratio:1;border:.12rem solid #83551f;border-radius:50%;min-width:2.8rem;box-shadow:inset 0 -.2rem #00000024,0 .15rem .2rem #00000024}.color-swatch[aria-pressed=true]{outline-offset:.18rem;outline:.3rem solid #3aa8ff}.size-panel{background:#fffdf0;grid-template-columns:1fr auto;grid-template-areas:"label preview""slider preview""output preview";align-items:center;gap:.3rem 1rem;padding:.8rem;display:grid}.size-panel label{grid-area:label;justify-self:center;font-size:1.35rem;font-weight:900}.slider-row{grid-area:slider;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;font-weight:900;display:grid}.slider-row input{appearance:none;touch-action:pan-y;background:0 0;width:100%;min-height:4rem}.slider-row input:focus-visible{outline-offset:.2rem;border-radius:999rem;outline:.25rem solid #7bc9ff}.slider-row input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#42b7ee,#e8d9bd);border:.12rem solid #8b7b5e;border-radius:999rem;height:1.1rem;box-shadow:inset 0 .15rem .2rem #00000024}.slider-row input::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(#73c9ff,#238ee1);border:.25rem solid #fff;border-radius:50%;width:3.4rem;height:3.4rem;margin-top:-1.25rem;box-shadow:0 .18rem #1b6fae,0 .25rem .45rem #23527055}.slider-row input::-moz-range-track{background:linear-gradient(90deg,#42b7ee,#e8d9bd);border:.12rem solid #8b7b5e;border-radius:999rem;height:1.1rem;box-shadow:inset 0 .15rem .2rem #00000024}.slider-row input::-moz-range-thumb{background:linear-gradient(#73c9ff,#238ee1);border:.25rem solid #fff;border-radius:50%;width:3.1rem;height:3.1rem;box-shadow:0 .18rem #1b6fae,0 .25rem .45rem #23527055}.size-output{background:var(--blue);color:#fff;border-radius:999rem;grid-area:output;justify-self:center;padding:.2rem .9rem;font-size:1.25rem;font-weight:900}.brush-preview{background:#fff;border:.15rem solid #7dcc5e;border-radius:50%;grid-area:preview;place-items:center;width:5.8rem;height:5.8rem;display:grid}.brush-preview span{border:.08rem solid #00000026;border-radius:50%;display:block}@media (width<=980px){.app-shell{height:var(--app-height);min-height:0;padding:.5rem;overflow:hidden}html.is-app-fullscreen .app-shell{height:var(--app-height);min-height:0;overflow:hidden}.app-menu{bottom:max(.5rem, env(safe-area-inset-bottom));left:max(.5rem, env(safe-area-inset-left))}.app-menu[open]{top:max(.5rem, env(safe-area-inset-top));bottom:max(.5rem, env(safe-area-inset-bottom));left:max(.5rem, env(safe-area-inset-left));width:min(26rem,100vw - 1rem)}.app-header{grid-template-columns:1fr;min-height:4.2rem}.fullscreen-button{place-items:center;display:inline-grid}.logo-letter{border-radius:.8rem;min-width:2.2rem;font-size:2rem}.logo-sub{font-size:.85rem}.play-area{grid-template-columns:1fr;gap:.5rem}.prefecture-card,.canvas-panel{min-height:0}.silhouette-wrap{min-height:10rem}.canvas-paper{min-height:18rem}.tool-dock{grid-template-columns:1fr}}@media (width<=560px){.prefecture-controls{grid-template-columns:1fr}.canvas-tool-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.canvas-tool-button{grid-template-columns:1fr;gap:.15rem;min-height:3rem;font-size:.8rem}.canvas-tool-button svg{width:1.35rem;height:1.35rem}.canvas-actions{justify-content:stretch}.canvas-actions button{flex:8rem}.color-palette{grid-template-columns:repeat(4,1fr)}.size-panel{grid-template-columns:1fr;grid-template-areas:"label""slider""output""preview"}.brush-preview{justify-self:center}}@media (orientation:landscape) and (height<=560px) and (width<=980px){.app-shell{height:var(--app-height);grid-template-rows:minmax(0,1fr);min-height:0;padding:.4rem;overflow:hidden}.app-menu{bottom:max(.4rem, env(safe-area-inset-bottom));left:max(.4rem, env(safe-area-inset-left));width:auto}.app-menu[open]{top:max(.4rem, env(safe-area-inset-top));bottom:max(.4rem, env(safe-area-inset-bottom));left:max(.4rem, env(safe-area-inset-left));width:min(18rem,42vw)}.menu-toggle{border-radius:.75rem;min-height:2.35rem;padding:.25rem .65rem;font-size:.85rem}.menu-panel{max-height:calc(var(--app-height) - 3.25rem);border-width:.18rem;border-radius:.85rem;gap:.45rem;margin-bottom:.35rem;padding:.55rem}.app-menu[open] .menu-panel{width:100%;height:100%;max-height:none;margin:0 0 .35rem}.menu-section{gap:.35rem}.menu-section h2{font-size:.85rem}.fullscreen-button{border-radius:.8rem;min-height:2.25rem;padding:.2rem .65rem;font-size:.8rem}.logo-main{gap:.08rem}.logo-letter{border-width:.15rem;border-radius:.65rem;min-width:1.9rem;padding:.05rem .15rem .15rem;font-size:1.65rem}.logo-sub{margin-top:0;font-size:.75rem}.play-area{grid-template-columns:minmax(14rem,.72fr) minmax(20rem,1.45fr);gap:.45rem}.prefecture-card,.canvas-panel,.size-panel,.color-palette{border-width:.18rem;border-radius:.9rem;box-shadow:0 .2rem #e7b42b}.prefecture-card{grid-template-rows:auto minmax(0,1fr) auto auto auto;padding:.45rem}.prefecture-reading{font-size:.9rem}.prefecture-region{display:none}.prefecture-card h1{margin:.05rem 0;font-size:1.8rem}.silhouette-wrap{min-height:0;padding:.15rem}.prefecture-silhouette{width:min(100%,14rem);height:min(100%,10rem)}.prefecture-controls{grid-template-columns:repeat(3,1fr);gap:.3rem}.prefecture-controls button,.canvas-actions button,.canvas-tool-button{border-radius:.75rem;min-height:2.35rem;font-size:.9rem}.canvas-tool-actions{gap:.3rem;margin-top:.3rem}.canvas-tool-button{grid-template-columns:1fr;gap:.1rem;padding:.2rem .3rem;font-size:.72rem}.canvas-tool-button svg{width:1.25rem;height:1.25rem}.page-badge{min-width:4.8rem;margin-top:.2rem;padding:.1rem .55rem;font-size:1rem}.canvas-panel{grid-template-rows:minmax(0,1fr);padding:.4rem}.canvas-paper{border-width:.12rem;border-radius:.65rem;min-height:0}.canvas-actions{gap:.3rem}.canvas-actions button{min-width:5.8rem}.tool-dock{border-width:.2rem;border-radius:.9rem;grid-template-columns:7.5rem minmax(18rem,1fr);gap:.5rem;padding:.45rem}.big-brush{border-radius:1rem;min-height:3.5rem;padding:.4rem .55rem;font-size:1rem;box-shadow:inset 0 -.25rem #ca6711}.color-palette{grid-template-columns:repeat(12,minmax(2rem,1fr));gap:.35rem;padding:.45rem}.color-swatch{min-width:2rem}.size-panel{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"label output preview""slider slider preview";gap:0 .55rem;padding:.45rem .6rem}.size-panel label{justify-self:start;font-size:1rem}.slider-row{gap:.4rem;font-size:.8rem}.slider-row input{min-height:2.9rem}.slider-row input::-webkit-slider-runnable-track{height:.8rem}.slider-row input::-webkit-slider-thumb{width:2.6rem;height:2.6rem;margin-top:-1rem}.slider-row input::-moz-range-track{height:.8rem}.slider-row input::-moz-range-thumb{width:2.4rem;height:2.4rem}.size-output{align-self:center;padding:.1rem .55rem;font-size:.95rem}.brush-preview{width:3.8rem;height:3.8rem}}
