:root{--night-1: #0b1030;--night-2: #0a0c22;--night-3: #06070f;--washi: #f3ecdd;--washi-dim: #b9b3a4;--ink: #11142e;--ink-soft: rgba(17, 20, 46, .62);--gold: #d9b65c;--gold-soft: #e8d49a;--vermilion: #e2553a;--line: rgba(216, 198, 150, .22);--panel-bg: rgba(12, 14, 34, .72);--panel-blur: blur(18px) saturate(1.1);--r: 14px;--serif: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;--sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif}*{box-sizing:border-box}html,body{margin:0}body{font-family:var(--sans);color:var(--washi);background:var(--night-3);overflow-x:hidden;-webkit-text-size-adjust:100%}.app-shell{position:relative;width:100%;height:100dvh;overflow:hidden}.sky{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 78% 8%,rgba(60,70,140,.35),transparent 55%),radial-gradient(100% 80% at 12% 0%,rgba(40,30,80,.3),transparent 50%),linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 48%,var(--night-3) 100%);overflow:hidden}.stars{position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 24%,rgba(255,255,255,.9),transparent),radial-gradient(1.2px 1.2px at 64% 12%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 38% 42%,rgba(255,255,255,.7),transparent),radial-gradient(1.6px 1.6px at 82% 30%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 50% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1.3px 1.3px at 12% 52%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 90% 50%,rgba(255,255,255,.65),transparent),radial-gradient(1.1px 1.1px at 72% 46%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 28% 10%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 46% 60%,rgba(255,255,255,.5),transparent);animation:twinkle 6s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.5}to{opacity:1}}@media(prefers-reduced-motion:reduce){.stars{animation:none}}.moon{position:absolute;top:7%;right:11%;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fdf6e3,#e7dcc0 60%,#cdbf99);box-shadow:0 0 60px 12px #f7f0d647,inset -10px -8px 20px #786e5040}.skyline{position:absolute;left:0;right:0;bottom:0;height:22vh;min-height:130px;background:var(--night-3);-webkit-mask:var(--skyline-mask) bottom/cover no-repeat;mask:var(--skyline-mask) bottom/cover no-repeat;opacity:.96}.skyline:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#141836e6,#06070f);-webkit-mask:inherit;mask:inherit}#fw-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;margin:0}.brand-logo{width:46px;height:46px;border-radius:13px;display:block;flex-shrink:0;box-shadow:0 0 0 1px #ffffff1a,0 6px 18px #00000073}.brand-latin{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.28em;color:var(--gold-soft);text-transform:uppercase}.nav{display:flex;gap:6px;background:var(--panel-bg);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);border:1px solid var(--line);border-radius:999px;padding:5px}.nav button{font-family:var(--sans);font-size:13px;color:var(--washi);background:transparent;border:0;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}.nav button:hover{background:#d8c69624}.quest-banner{position:absolute;top:76px;left:50%;transform:translate(-50%);z-index:5;width:min(560px,calc(100% - 32px));background:var(--panel-bg);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:14px 16px 14px 18px;box-shadow:0 18px 50px #00000080}.quest-banner-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}#quest-from{font-family:var(--serif);color:var(--gold-soft);font-size:13px;letter-spacing:.05em}#quest-text{font-size:16px;font-weight:500;margin:2px 0 6px}#quest-hint{font-size:12px;color:var(--washi-dim)}.quest-status{font-size:12.5px;margin-top:8px;color:var(--washi-dim)}.quest-status.ready{color:var(--gold-soft)}.quest-status.done{color:#8ff0a8;font-weight:700;font-family:var(--serif);letter-spacing:.08em}.icon-x{background:transparent;border:0;color:var(--washi-dim);font-size:18px;cursor:pointer;line-height:1;padding:2px 4px}.icon-x:hover{color:var(--washi)}.panel{position:absolute;left:16px;bottom:16px;z-index:6;width:340px;max-width:calc(100% - 32px);max-height:calc(100dvh - 110px);display:flex;flex-direction:column;background:var(--panel-bg);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px #0000008c;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s;overflow:hidden}[dir=rtl] .panel{left:auto;right:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0}.panel-head h2{font-family:var(--serif);font-size:15px;margin:0;letter-spacing:.08em}#panel-toggle{background:transparent;border:1px solid var(--line);color:var(--washi);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;transition:background .18s}#panel-toggle:hover{background:#d8c69624}.panel-body{padding:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(216,198,150,.3) transparent}.panel-body::-webkit-scrollbar{width:7px}.panel-body::-webkit-scrollbar-thumb{background:#d8c6964d;border-radius:4px}body.panel-collapsed .panel{transform:translateY(calc(100% - 56px))}body.panel-collapsed .panel-head{border-bottom-color:transparent}body.panel-collapsed #panel-toggle{transform:rotate(180deg)}.section{margin-bottom:20px}.section:last-child{margin-bottom:4px}.section-label{display:flex;align-items:baseline;gap:8px;font-size:11px;letter-spacing:.18em;color:var(--gold-soft);text-transform:uppercase;margin-bottom:10px}.section-label .jp{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--washi);text-transform:none}.metal-list{display:flex;flex-direction:column;gap:7px}.metal-chip{border-radius:11px;overflow:hidden}.metal-btn{width:100%;display:flex;align-items:center;gap:11px;background:#ffffff08;border:1px solid var(--line);border-radius:11px;padding:9px 12px;cursor:pointer;color:var(--washi);font-family:var(--sans);transition:background .16s,border-color .16s;text-align:left}.metal-btn:hover{background:#ffffff0f}.metal-chip.on .metal-btn{background:#d8c6961f;border-color:#d8c69680}.metal-dot{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 10px 1px var(--c);flex-shrink:0}.metal-sym{font-family:var(--serif);font-weight:700;font-size:15px;width:26px;flex-shrink:0}.metal-name{font-size:13px;display:flex;flex-direction:column;line-height:1.25}.metal-name em{font-style:normal;font-size:11px;color:var(--washi-dim)}.metal-chip.on .metal-name em{color:var(--gold-soft)}.metal-ratio{display:flex;align-items:center;gap:10px;padding:8px 12px 10px}.metal-ratio[hidden]{display:none}.metal-ratio input{flex:1}.ratio-val{font-size:12px;color:var(--gold-soft);width:40px;text-align:right;font-variant-numeric:tabular-nums}.shape-list{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.shape-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:#ffffff08;border:1px solid var(--line);border-radius:11px;padding:10px 4px 8px;cursor:pointer;color:var(--washi);font-family:var(--sans);transition:background .16s,border-color .16s,transform .16s}.shape-btn:hover{background:#ffffff0f;transform:translateY(-1px)}.shape-btn.on{background:#d8c69624;border-color:#d8c6968c}.shape-name{font-size:11px}.shape-ico{width:30px;height:30px;border-radius:50%;position:relative;display:block}.shape-ico[data-shape=chrysanthemum]{background:repeating-conic-gradient(from 0deg,var(--gold-soft) 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 64%,transparent 66%);mask:radial-gradient(circle,#000 64%,transparent 66%)}.shape-ico[data-shape=peony]{background:radial-gradient(2px 2px at 50% 8%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 50% 92%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 8% 50%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 92% 50%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 22% 22%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 78% 22%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 22% 78%,var(--gold-soft) 99%,transparent),radial-gradient(2px 2px at 78% 78%,var(--gold-soft) 99%,transparent),radial-gradient(2.5px 2.5px at 50% 50%,var(--gold-soft) 99%,transparent)}.shape-ico[data-shape=willow]{background:linear-gradient(var(--gold-soft),transparent) 50% 0/2px 70% no-repeat,linear-gradient(var(--gold-soft),transparent) 28% 6%/2px 60% no-repeat,linear-gradient(var(--gold-soft),transparent) 72% 6%/2px 60% no-repeat,linear-gradient(var(--gold-soft),transparent) 14% 18%/2px 46% no-repeat,linear-gradient(var(--gold-soft),transparent) 86% 18%/2px 46% no-repeat}.shape-ico[data-shape=star]{background:var(--gold-soft);clip-path:polygon(50% 2%,61% 38%,98% 38%,68% 60%,79% 96%,50% 73%,21% 96%,32% 60%,2% 38%,39% 38%)}.shape-ico[data-shape=heart]{background:var(--gold-soft);clip-path:path("M15 27 C 4 18, 2 9, 9 5 C 13 3, 15 7, 15 9 C 15 7, 17 3, 21 5 C 28 9, 26 18, 15 27 Z")}.seg-group{display:flex;gap:6px}.seg{flex:1;background:#ffffff08;border:1px solid var(--line);border-radius:9px;padding:9px 4px;cursor:pointer;color:var(--washi);font-family:var(--sans);font-size:13px;transition:background .16s,border-color .16s}.seg:hover{background:#ffffff0f}.seg.on{background:#d8c69629;border-color:#d8c6968c;color:var(--gold-soft)}.seg em{font-style:normal;display:block;font-size:10px;color:var(--washi-dim);margin-top:2px}.seg.on em{color:var(--gold-soft)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.toggle-row .label-main{font-size:13.5px}.toggle-row .label-sub{font-size:11px;color:var(--washi-dim);margin-top:2px}.switch{position:relative;width:46px;height:26px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch .track{position:absolute;inset:0;cursor:pointer;background:#ffffff1f;border-radius:999px;transition:background .2s}.switch .track:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--washi);border-radius:50%;transition:transform .2s}.switch input:checked+.track{background:var(--gold)}.switch input:checked+.track:before{transform:translate(20px)}input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:#ffffff29;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 8px #d8c69699;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;background:var(--gold-soft);cursor:pointer}.range-row{display:flex;align-items:center;gap:10px}.range-row input[type=range]{flex:1}.range-row .val{font-size:12px;color:var(--gold-soft);width:34px;text-align:right;font-variant-numeric:tabular-nums}.summary{display:flex;align-items:center;gap:12px;background:#ffffff0a;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:14px}#summary-swatch{width:38px;height:38px;border-radius:50%;flex-shrink:0;transition:background .25s,box-shadow .25s}.summary-info{font-size:12px;line-height:1.45;min-width:0}.summary-info b{color:var(--washi);font-weight:600}.summary-info span{color:var(--washi-dim)}.btn-row{display:flex;gap:8px}.btn{font-family:var(--sans);font-size:14px;border-radius:11px;padding:12px 16px;cursor:pointer;border:1px solid var(--line);background:#ffffff0d;color:var(--washi);transition:background .16s,transform .1s,border-color .16s}.btn:hover{background:#ffffff1a}.btn:active{transform:scale(.97)}.btn-primary{flex:1;background:linear-gradient(135deg,var(--vermilion),#c23d28);border-color:transparent;color:#fff;font-weight:600;font-family:var(--serif);letter-spacing:.08em;font-size:15px;box-shadow:0 8px 22px #e2553a5c}.btn-primary:hover{background:linear-gradient(135deg,#ef6249,#cf432c)}.btn.on{background:#d8c6962e;border-color:#d8c6968c;color:var(--gold-soft)}.btn-ghost{background:transparent}.overlay{position:fixed;inset:0;z-index:20;background:#04050ca8;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}.overlay.open{opacity:1;pointer-events:auto}.modal{position:fixed;z-index:21;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);width:min(680px,calc(100% - 32px));max-height:86vh;background:linear-gradient(180deg,#12152f,#0c0e22);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 100px #000000b3;opacity:0;pointer-events:none;transition:opacity .28s,transform .28s;display:flex;flex-direction:column;overflow:hidden}.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}.modal-head h2{font-family:var(--serif);font-size:21px;margin:0;letter-spacing:.06em}.modal-head .sub{font-size:11px;letter-spacing:.24em;color:var(--gold-soft);text-transform:uppercase;margin-top:4px}.modal-body{padding:22px 24px 26px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(216,198,150,.3) transparent}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-thumb{background:#d8c69647;border-radius:4px}.modal-close{background:transparent;border:1px solid var(--line);color:var(--washi);width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;transition:background .16s}.modal-close:hover{background:#d8c69624}.steps{display:flex;flex-direction:column;gap:16px}.step{display:flex;gap:14px}.step-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);background:var(--gold-soft)}.step-body h3{margin:4px 0 5px;font-size:15.5px;font-family:var(--serif);letter-spacing:.04em}.step-body p{margin:0;font-size:13.5px;line-height:1.7;color:var(--washi-dim)}.step-body p b{color:var(--washi);font-weight:600}.note{margin-top:22px;padding:14px 16px;background:#d8c69614;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;font-size:13px;line-height:1.7;color:var(--washi-dim)}.note b{color:var(--gold-soft)}.flame-table{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.flame-cell{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#ffffff08}.flame-cell .dot{width:18px;height:18px;border-radius:50%;flex-shrink:0}.flame-cell .t1{font-family:var(--serif);font-weight:700}.flame-cell .t2{font-size:12px}.flame-cell .t3{font-size:11px;color:var(--washi-dim);margin-left:auto}[dir=rtl] .flame-cell .t3{margin-left:0;margin-right:auto}.qa-item{border-bottom:1px solid var(--line)}.qa-q{width:100%;text-align:left;background:transparent;border:0;color:var(--washi);font-family:var(--sans);font-size:15px;padding:16px 36px 16px 30px;cursor:pointer;position:relative;line-height:1.5}.qa-q:before{content:"Q";position:absolute;left:4px;top:16px;font-family:var(--serif);color:var(--gold-soft);font-weight:700}.qa-q:after{content:"＋";position:absolute;right:8px;top:16px;color:var(--washi-dim);transition:transform .2s}.qa-item.open .qa-q:after{content:"－"}.qa-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 30px}.qa-item.open .qa-a{max-height:360px}.qa-a p{margin:0 0 16px;font-size:13.5px;line-height:1.75;color:var(--washi-dim);padding-top:2px}.qa-a a{color:var(--gold-soft)}.share-url-row{display:flex;gap:8px;margin:6px 0 16px}#share-url{flex:1;background:#0000004d;border:1px solid var(--line);color:var(--washi);border-radius:10px;padding:11px 13px;font-size:13px;font-family:var(--sans)}.share-x{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;text-decoration:none;padding:11px 18px;border-radius:10px;font-size:14px;border:1px solid var(--line);transition:background .16s}.share-x:hover{background:#222}.quest-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}#quest-progress{font-size:13px;color:var(--gold-soft);font-family:var(--serif)}.quest-list{display:flex;flex-direction:column;gap:8px}.quest-item{display:flex;align-items:center;gap:13px;text-align:left;background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--washi);font-family:var(--sans);transition:background .16s,border-color .16s}.quest-item:hover{background:#ffffff12}.quest-item.done{border-color:#8ff0a866}.quest-seal{flex-shrink:0;min-width:34px;height:34px;padding:0 6px;border-radius:8px;display:grid;place-items:center;font-family:var(--serif);font-size:14px;background:var(--vermilion);color:#fff;border:1px solid rgba(255,255,255,.2)}.quest-item.done .quest-seal{background:#2f7a45}.quest-body{display:flex;flex-direction:column;gap:2px;min-width:0}.quest-body strong{font-family:var(--serif);font-size:13px;color:var(--gold-soft)}.quest-body span{font-size:13px;line-height:1.4}.foot-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px}.foot-links a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s}.foot-links a:hover{border-bottom-color:var(--gold-soft)}.foot-links .sep{color:var(--washi-dim);opacity:.4}.welcome-toast{position:absolute;top:76px;left:50%;transform:translate(-50%);z-index:7;background:var(--panel-bg);backdrop-filter:var(--panel-blur);border:1px solid var(--line);border-radius:12px;padding:12px 20px;font-size:13.5px;box-shadow:0 18px 50px #00000080;font-family:var(--serif);letter-spacing:.04em}.welcome-toast b{color:var(--gold-soft)}.seo{position:relative;z-index:8;background:linear-gradient(180deg,var(--night-3),#05060c);border-top:1px solid var(--line);padding:56px 20px 80px}.seo-inner{max-width:900px;margin:0 auto}.seo-title{font-family:var(--serif);font-size:20px;letter-spacing:.05em;margin:40px 0 18px;color:var(--washi)}.seo-title:first-child{margin-top:0}.seo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.seo-card{background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:16px 18px}.seo-card h3{margin:0 0 6px;font-size:14.5px;font-family:var(--serif);color:var(--gold-soft);letter-spacing:.03em}.seo-card p{margin:0;font-size:13.5px;line-height:1.75;color:var(--washi-dim)}.seo-faq{display:flex;flex-direction:column;gap:8px}.seo-faq-item{background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:4px 18px}.seo-faq-item summary{cursor:pointer;padding:14px 0;font-size:14.5px;color:var(--washi);list-style:none;position:relative}.seo-faq-item summary::-webkit-details-marker{display:none}.seo-faq-item summary:after{content:"＋";position:absolute;right:0;color:var(--washi-dim)}[dir=rtl] .seo-faq-item summary:after{right:auto;left:0}.seo-faq-item[open] summary:after{content:"－"}.seo-faq-item p{margin:0 0 16px;font-size:13.5px;line-height:1.75;color:var(--washi-dim)}.seo-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px}.seo-links a{color:var(--gold-soft);text-decoration:none}.seo-links a:hover{text-decoration:underline}@media(max-width:560px){.brand-latin{display:none}.nav button{padding:8px 11px;font-size:12.5px}.panel{left:8px;right:8px;bottom:8px;width:auto;max-height:50vh}[dir=rtl] .panel{left:8px;right:8px}body.panel-collapsed .panel{transform:translateY(calc(100% - 56px))}.panel-body{display:flex;flex-direction:column}.panel-body>.summary{order:0}.panel-body>.section{order:2}.panel-body>.section:last-child{order:1;margin:0 0 18px}.quest-banner{top:70px}.moon{width:60px;height:60px}.seo-grid{grid-template-columns:1fr}}@media(max-width:380px){.shape-name{font-size:10px}.flame-table{grid-template-columns:1fr}}