:root{--green: #1B2921;--green-2: #24372b;--washi: #F5EBD6;--washi-2: #ece0c6;--gold: #D7B476;--leaf: #A5C878;--sakura: #D98293;--ink: #2a241b;--ink-soft: #5b4a36;--serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;--brush: "Yuji Syuku", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;--sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;--radius: 22px;--shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);--washi-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--green)}body{font-family:var(--sans);color:var(--washi);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.app{position:relative;min-height:100vh;min-height:100dvh;overflow-x:hidden}.scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 70% at 70% 8%,rgba(255,226,160,.3),rgba(215,180,118,.08) 40%,transparent 70%),radial-gradient(80% 60% at 10% 100%,rgba(80,110,60,.35),transparent 70%),linear-gradient(180deg,#2b3a27,#1f2c21 55%,#151d16)}.scene-light{position:absolute;inset:-20% -10% auto auto;width:90vmax;height:90vmax;background:radial-gradient(closest-side,rgba(255,238,190,.22),transparent);animation:breathe 9s ease-in-out infinite alternate}.scene-shafts{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(115deg,transparent 0 7vw,rgba(255,236,190,.05) 7vw 10vw,transparent 10vw 18vw);mask-image:linear-gradient(180deg,#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}.scene-bokeh{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 18% 22%,rgba(255,230,170,.14) 0 14px,transparent 15px),radial-gradient(circle at 82% 35%,rgba(255,230,170,.1) 0 22px,transparent 23px),radial-gradient(circle at 65% 12%,rgba(255,230,170,.12) 0 9px,transparent 10px),radial-gradient(circle at 30% 60%,rgba(255,230,170,.07) 0 26px,transparent 27px),radial-gradient(circle at 90% 70%,rgba(217,130,147,.1) 0 12px,transparent 13px)}.scene-leaves{position:absolute;top:-40px;width:46vmin;height:46vmin;opacity:.5;filter:blur(1.5px);background:radial-gradient(ellipse 30% 18% at 30% 40%,#3e5a2c 60%,transparent 62%),radial-gradient(ellipse 26% 14% at 60% 25%,#2f4a22 60%,transparent 62%),radial-gradient(ellipse 22% 12% at 70% 55%,#4a6a33 60%,transparent 62%),radial-gradient(ellipse 18% 10% at 20% 70%,#33502a 60%,transparent 62%)}.scene-leaves-l{left:-12vmin;transform:rotate(-15deg)}.scene-leaves-r{right:-14vmin;transform:rotate(160deg);top:auto;bottom:18vh;opacity:.35}.scene-floor{position:absolute;left:0;right:0;bottom:0;height:16vh;background:linear-gradient(180deg,transparent,rgba(40,28,18,.65) 40%,#1a120c)}.petals span{position:absolute;top:-5%;width:10px;height:7px;border-radius:60% 40%;background:var(--sakura);opacity:.55;animation:fall linear infinite}@keyframes fall{0%{transform:translate3d(0,-5vh,0) rotate(0)}50%{transform:translate3d(6vw,50vh,0) rotate(200deg)}to{transform:translate3d(-4vw,110vh,0) rotate(420deg)}}@keyframes breathe{0%{opacity:.7}to{opacity:1}}[data-reduce-motion=true] .petals,[data-reduce-motion=true] .scene-light{animation:none}[data-reduce-motion=true] .petals{display:none}@media (prefers-reduced-motion: reduce){.petals{display:none}.scene-light{animation:none}}.screen{position:relative;z-index:1;margin:0 auto;width:100%;max-width:1280px;min-height:100vh;min-height:100dvh;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.washi{background-color:var(--washi);background-image:var(--washi-tex),radial-gradient(120% 90% at 50% 0%,#fbf4e4,#efe2c7);color:var(--ink)}.panel{border-radius:var(--radius);box-shadow:var(--shadow);position:relative}.panel:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:calc(var(--radius) - 8px);border:1.5px solid rgba(215,180,118,.7);pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--gold);font-weight:700;font-size:17px;letter-spacing:.08em;transition:transform .12s ease,box-shadow .12s ease,filter .12s;box-shadow:0 6px 16px #0000004d,inset 0 1px #fff9}.btn svg{width:20px;height:20px;flex:none}.btn:active:not(:disabled){transform:translateY(1px) scale(.98)}.btn:disabled{opacity:.6}.btn-primary,.btn-light{background:linear-gradient(180deg,#fbf3e2,#ead9b6);color:var(--ink)}.btn-primary{border-width:3px}.btn-xl{min-height:62px;font-size:21px;padding:0 40px}.btn-dark{background:linear-gradient(180deg,#2a3d30,#17231b);color:var(--washi)}.btn-ghost-light{background:#f5ebd61f;color:var(--washi);border-color:#d7b47699}.btn-text{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-soft)}.btn-danger{background:linear-gradient(180deg,#f8e6e4,#e9c2bd);color:#7a2a20;border-color:#c9837a}.btn-sm{min-height:44px;font-size:15px;padding:0 16px;gap:6px}@media (hover: hover){.btn:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 10px 22px #00000059,inset 0 1px #fff9}}.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;background:#141e168c;border:1px solid rgba(245,235,214,.18);color:var(--washi);font-weight:500;font-size:16px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.chip-btn svg{width:20px;height:20px}.icon-btn{display:inline-grid;place-items:center;width:46px;height:46px;border:0;background:transparent}.icon-btn.round{border-radius:50%;background:#141e1699;border:1px solid rgba(245,235,214,.2);color:var(--washi)}.icon-btn svg{width:22px;height:22px}.progress-pill{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;border-radius:999px;background:#101812b8;border:1px solid rgba(215,180,118,.35);color:var(--washi);box-shadow:inset 0 1px #ffffff0f;font-family:var(--serif)}.progress-pill svg{width:20px;height:20px}.progress-label{font-weight:700;letter-spacing:.15em}.progress-num{font-size:15px;letter-spacing:.05em}.progress-num b{font-size:22px}.dots{display:inline-flex;gap:6px;margin-left:4px}.dots i{width:10px;height:10px;border-radius:50%;background:#f5ebd638;transition:background .3s,box-shadow .3s}.dots i.on{background:var(--leaf);box-shadow:0 0 8px #a5c878b3}.dots i.cur{background:#a5c87873;outline:1.5px solid var(--leaf)}.bonsai-canvas,.thumb-canvas{display:block;width:100%;height:100%}.title-screen{display:grid;grid-template-rows:auto 1fr auto;gap:6px}.title-copy{display:contents}.logo{margin:8px 0 0;font-family:var(--brush);font-weight:400;line-height:1.05;color:var(--washi);font-size:clamp(44px,13.5vw,96px);text-shadow:0 4px 18px rgba(0,0,0,.45);position:relative;letter-spacing:.02em}.logo span{display:block;white-space:nowrap}.logo span:last-child{padding-left:.9em;position:relative}.logo span:last-child:after{content:"";position:absolute;left:1em;right:.2em;bottom:-.08em;height:.09em;border-radius:99px;background:linear-gradient(90deg,transparent,var(--sakura) 15%,#b7485e 85%,transparent);transform:rotate(-2deg);opacity:.9}.title-bonsai{min-height:0;height:min(52dvh,120vw);position:relative}.title-actions{display:flex;flex-direction:column;align-items:center;gap:14px}.subtitle{margin:0;font-family:var(--serif);font-size:17px;line-height:1.75;letter-spacing:.08em;color:#f5ebd6eb;text-align:center;order:3}.title-screen .logo{order:1}.title-screen .title-bonsai{order:2}.title-screen .title-actions{order:4}.title-sub{display:flex;gap:12px}.title-actions .btn-primary{min-width:min(320px,86vw)}.motion-toggle{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:#f5ebd6b3;padding:6px}.motion-toggle input{width:18px;height:18px;accent-color:var(--leaf)}.grow-screen{display:flex;flex-direction:column;gap:10px}.grow-header{display:flex;align-items:center;gap:10px}.grow-stage{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;min-height:0}.grow-stage .bonsai-canvas{flex:1 1 auto;min-height:38dvh;height:auto}.bubble{position:relative;z-index:2;padding:12px 26px;border-radius:28px;font-family:var(--serif);font-weight:700;font-size:clamp(18px,5vw,26px);letter-spacing:.1em;box-shadow:var(--shadow);margin-top:4px}.bubble:after{content:"";position:absolute;right:22%;bottom:-12px;border:12px solid transparent;border-top-color:#f2e6cc;border-bottom:0}.grow-feedback{margin:0;min-height:1.6em;font-family:var(--serif);font-size:16px;letter-spacing:.05em;color:var(--washi);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-btn{display:flex;align-items:center;gap:10px;min-height:76px;padding:10px 12px;border-radius:20px;text-align:left;border:2px solid rgba(215,180,118,.85);background:linear-gradient(180deg,#fbf4e5,#ebdcbd);color:var(--ink);box-shadow:0 6px 14px #00000052,inset 0 1px #ffffffb3;font-weight:700;font-size:14.5px;line-height:1.4;letter-spacing:.02em;word-break:keep-all;transition:transform .12s,filter .12s;touch-action:manipulation}.choice-btn:active:not(:disabled){transform:scale(.97)}.choice-btn:disabled{filter:saturate(.6) brightness(.92)}.choice-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff9;box-shadow:inset 0 0 0 1px #5b4a3626}.choice-icon svg{width:26px;height:26px}.choice-prune .choice-icon,.choice-random .choice-icon{color:#2a241b}@media (hover: hover){.choice-btn:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}}.br-sp{display:inline}.br-pc{display:none}.choice-sub{display:block;font-size:11px;font-weight:500;color:var(--ink-soft);letter-spacing:0}.result-screen{display:flex;flex-direction:column;gap:12px}.result-stage{position:relative;height:min(48dvh,112vw)}.kansei{position:absolute;left:4px;top:0;z-index:2;font-family:var(--brush);font-size:clamp(40px,12vw,72px);color:var(--washi);text-shadow:0 4px 16px rgba(0,0,0,.5);transform:rotate(-6deg)}.kansei:before,.kansei:after{content:"";position:absolute;width:4px;height:.45em;background:var(--gold);border-radius:2px;top:.1em}.kansei:before{left:-.25em;transform:rotate(-30deg)}.kansei:after{right:-.3em;transform:rotate(30deg)}.kansei.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}@keyframes pop{0%{transform:rotate(-6deg) scale(.4);opacity:0}to{transform:rotate(-6deg) scale(1);opacity:1}}.result-panel{padding:26px 22px 20px;text-align:center}.panel-kicker{margin:0;font-family:var(--serif);font-size:15px;color:var(--ink-soft);letter-spacing:.1em}.work-name{margin:6px 0 0;font-family:var(--serif);font-weight:800;font-size:clamp(26px,7.4vw,44px);letter-spacing:.06em;line-height:1.3;color:var(--green);word-break:keep-all;overflow-wrap:anywhere}.panel-rule{border:0;height:1px;background:#5b4a3640;margin:12px 8%}.work-comment{margin:0 0 14px;font-family:var(--serif);font-size:16px;line-height:1.8;letter-spacing:.05em;color:#3b3125}.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.tag{padding:5px 13px;border-radius:999px;background:#fffaf0;border:1.5px solid #cdb88e;font-size:14px;font-weight:700;color:var(--ink)}.tag-head{background:#4d6a35;border-color:#4d6a35;color:var(--washi)}.save-note{margin:14px 0 0;font-size:13px;color:#4d6a35}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;position:relative;z-index:1}.result-actions .btn-dark{grid-column:1 / -1;min-height:56px}.result-actions .btn-text{grid-column:1 / -1;min-height:44px}.result-actions .btn-light{padding:0 10px;font-size:15px}.collection-screen{display:flex;flex-direction:column;gap:14px}.col-header{display:flex;align-items:center;gap:10px}.col-body{display:grid;gap:18px}.col-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.col-card{position:relative;width:100%;aspect-ratio:1 / 1.08;border-radius:18px;padding:4px 4px 26px;border:2px solid rgba(215,180,118,.6);background:var(--washi-tex),radial-gradient(120% 100% at 50% 20%,#fbf4e4,#e8d8b6);box-shadow:0 6px 14px #0000004d;display:block}.col-card.sel{border-color:#f0c57a;box-shadow:0 0 0 3px #f0c57a8c,0 8px 18px #00000059}.col-name{position:absolute;left:6px;right:6px;bottom:6px;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-card.ph{display:grid;place-items:center;background:#f5ebd614;border-style:dashed;border-color:#f5ebd633;box-shadow:none}.ph-mark{font-family:var(--serif);font-size:34px;color:#f5ebd64d}.empty{padding:26px;border-radius:var(--radius);text-align:center;margin-bottom:14px}.empty p{margin:0 0 14px;font-family:var(--serif)}.full-note{padding:12px 16px;border-radius:14px;margin-top:12px;font-size:14px}.col-detail{padding:22px;align-self:start;position:sticky;top:16px}.detail{text-align:center}.detail-thumb{height:220px;margin-bottom:4px}.detail .work-name{font-size:clamp(24px,6vw,34px)}.detail-date{font-size:12px;color:var(--ink-soft);margin:12px 0 0}.detail-actions{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#080c0999;display:grid;align-items:end;justify-items:center;padding:12px;animation:fade .18s ease}.modal{position:relative;width:min(560px,100%);max-height:88dvh;overflow:auto;border-radius:24px;padding:24px 22px 22px;box-shadow:var(--shadow);animation:rise .22s ease;outline:none}.modal-title{margin:0 40px 12px 0;font-family:var(--serif);font-size:20px;letter-spacing:.06em;color:var(--green)}.modal-close{position:absolute;top:10px;right:10px;color:var(--ink)}.howto{margin:0 0 12px;padding-left:1.3em;line-height:1.8;font-size:15px}.howto-note{font-family:var(--serif);color:var(--ink-soft);font-size:14px}.confirm-text{line-height:1.7}.confirm-actions{display:flex;gap:10px;justify-content:flex-end}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{transform:translateY(16px);opacity:0}}[data-reduce-motion=true] .modal,[data-reduce-motion=true] .modal-backdrop{animation:none}.toast-wrap{position:fixed;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));z-index:60;display:flex;justify-content:center;pointer-events:none}.toast{background:#101812eb;color:var(--washi);border:1px solid rgba(215,180,118,.5);padding:12px 20px;border-radius:999px;font-size:14px;box-shadow:var(--shadow);max-width:92vw;animation:rise .2s ease}@media (min-width: 900px) and (min-aspect-ratio: 1/1){.screen{padding:28px 40px}.title-screen{grid-template-columns:minmax(360px,.9fr) 1.1fr;grid-template-rows:1fr;align-items:center}.title-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}.title-actions{align-items:flex-start}.subtitle{order:2;text-align:left;font-size:19px}.logo{font-size:clamp(64px,7.4vw,112px)}.title-bonsai{height:min(88dvh,720px)}.grow-screen{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto 1fr;column-gap:32px}.grow-header{grid-column:1 / -1}.grow-stage{justify-content:center}.grow-stage .bonsai-canvas{height:min(66dvh,600px)}.bubble{align-self:flex-start;margin-left:8%}.choices{grid-template-columns:1fr;align-content:center;gap:14px}.choice-btn{min-height:84px;font-size:18px;padding:12px 22px;gap:18px;border-radius:26px}.choice-icon{width:52px;height:52px;background:transparent;box-shadow:none}.choice-icon svg{width:36px;height:36px}.br-sp{display:none}.br-pc{display:inline}.choice-sub{font-size:18px;font-weight:700;color:inherit;letter-spacing:.02em}.result-screen{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:36px}.result-stage{height:min(86dvh,700px)}.result-panel{padding:36px 34px 28px}.col-body{grid-template-columns:1.5fr 1fr;align-items:start}.col-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.col-name{font-size:13px}.modal-backdrop{align-items:center}}@media (min-width: 560px) and (max-width: 899px){.col-grid{grid-template-columns:repeat(4,1fr)}}@media (max-height: 640px) and (max-width: 899px){.title-bonsai{height:42dvh}.grow-stage .bonsai-canvas{height:36dvh}.choice-btn{min-height:64px}}