:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#3b2c4b;background:#f8f4ea;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #6c53bc;outline-offset:3px}
body{--outfit:#a78bd2;--outfit-dark:#7b65aa;--outfit-light:#d6c6ee;--stage-tint:rgba(255,241,204,.05);--stage-bg:#fff1cf}
body[data-outfit="peach"]{--outfit:#ed9b94;--outfit-dark:#c9757b;--outfit-light:#ffcfbf}
body[data-outfit="mint"]{--outfit:#94d0be;--outfit-dark:#65a798;--outfit-light:#c9ece0}
body[data-outfit="lemon"]{--outfit:#edcb76;--outfit-dark:#bb9a53;--outfit-light:#fff0b7}
body[data-world="pink"]{--stage-tint:rgba(247,161,190,.32);--stage-bg:#f9d1e3}
body[data-world="blue"]{--stage-tint:rgba(129,194,223,.29);--stage-bg:#d8eef5}
.app{min-height:100vh;display:flex;flex-direction:column;background:#f8f4ea;overflow:hidden}
.site-header{height:86px;padding:0 clamp(24px,3.5vw,60px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5dccc;gap:24px}
.logo{color:#3b2c4b;text-decoration:none;display:flex;gap:11px;align-items:center;font-size:26px;font-weight:900;letter-spacing:-.08em;line-height:1}
.logo small{font-size:10px;letter-spacing:.04em;margin-left:7px;font-weight:700}.logo-flower{display:grid;place-items:center;width:39px;height:39px;background:#ec9b8c;color:#fff6e8;border-radius:13px;font-size:30px;line-height:1;transform:rotate(-13deg)}.logo-flower::first-letter{transform:rotate(13deg)}
.header-note{font-size:12px;letter-spacing:.13em;color:#8b7b8d}.edition{font-size:10px;font-weight:800;letter-spacing:.16em;display:flex;gap:22px;align-items:center}.edition b{font-size:11px;color:#ad9aad}
.workspace{flex:1;min-height:690px;display:grid;grid-template-columns:minmax(260px,28%) minmax(380px,44%) minmax(310px,28%)}
.intro{padding:clamp(38px,5.5vw,93px) clamp(23px,3.5vw,60px) 29px;display:flex;flex-direction:column;position:relative;z-index:1}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.15em;color:#9172ab;display:flex;align-items:center;gap:9px;margin:0 0 40px}.eyebrow span:last-child{color:#c3b8b4}.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#ed9c91;box-shadow:0 0 0 5px #f8e0d9}
h1{font-size:clamp(34px,3.45vw,60px);font-weight:800;letter-spacing:-.11em;line-height:1.52;margin:0;white-space:nowrap}h1 em{font-style:normal;color:#bc76ad;position:relative}h1 em:after{content:"";position:absolute;height:9px;left:4px;right:0;bottom:-12px;background:#e9b8da;border-radius:90%;transform:rotate(-4deg)}
.intro-copy{color:#786c7b;line-height:2.1;font-size:clamp(12px,.9vw,15px);margin:45px 0 0;white-space:nowrap}.intro-foot{display:flex;align-items:center;gap:18px;margin-top:auto;margin-bottom:40px}.intro-foot p{color:#9b8795;font-size:11px;line-height:1.8;margin:0}.scribble{font-family:Georgia,serif;color:#db8ca0;font-size:54px;transform:rotate(16deg)}.series{font-size:10px;font-weight:800;letter-spacing:.13em;color:#a998a5;border-top:1px solid #e1d9d0;padding-top:19px;display:flex;justify-content:space-between;margin:0}.series span{font-size:16px;color:#df91a1}
.charm-art{position:relative;align-self:flex-start;margin-top:auto;width:150px;height:122px;transform:rotate(-7deg);border:5px solid #fffdf8;border-radius:19px;overflow:hidden;box-shadow:0 14px 30px #927b9933}.charm-art img{width:100%;height:100%;object-fit:cover}.charm-art span{position:absolute;inset:36px 0 auto;text-align:center;color:#845e91;font-family:Georgia,serif;font-size:13px;font-weight:bold;letter-spacing:.13em;line-height:1.4}.intro-foot{margin-top:24px}
.stage{position:relative;min-height:690px;isolation:isolate;background:var(--stage-bg);border-left:1px solid #e9dbd2;border-right:1px solid #e9dbd2;transition:background .5s}
.stage-image{position:absolute;inset:0;background:url('assets/nimu-stage.jpg') center / cover no-repeat;z-index:-3}
.stage-wash{position:absolute;inset:0;background:var(--stage-tint);mix-blend-mode:multiply;z-index:-2;transition:background .45s}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(254,247,234,.25),transparent 20%,transparent 80%,rgba(254,247,234,.24));z-index:-1}
.stage-top{position:absolute;top:29px;left:32px;right:32px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;font-weight:900;color:#634f70;z-index:2}.live-dot{width:8px;height:8px;border-radius:50%;background:#e98295;box-shadow:0 0 0 4px #ffecdf}.stage-no{margin-left:auto}.character-wrap{position:absolute;inset:5% 2% 4%;display:grid;place-items:end center;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .25s ease-out}.character{height:min(96%,750px);max-width:99%;overflow:visible;filter:drop-shadow(0 25px 25px rgba(116,76,117,.13));animation:breathe 4s ease-in-out infinite;transform-origin:50% 82%}.character g.eyes,.character .mouth{display:none}body[data-mood="happy"] .eyes-happy,body[data-mood="happy"] .mouth-happy,body[data-mood="calm"] .eyes-calm,body[data-mood="calm"] .mouth-calm,body[data-mood="wink"] .eyes-wink,body[data-mood="wink"] .mouth-wink{display:block}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-7px) rotate(.5deg)}}
.spark{position:absolute;color:#fff8d8;text-shadow:0 2px 5px #daadc2,0 0 15px #fff;font-size:35px;pointer-events:none;animation:twinkle 4s ease-in-out infinite}.spark-one{left:11%;top:33%}.spark-two{right:13%;top:21%;font-size:25px;animation-delay:-1s}.spark-three{right:14%;bottom:28%;font-size:42px;animation-delay:-2.5s}@keyframes twinkle{50%{transform:rotate(20deg) scale(1.15);opacity:.6}}
.stage-label{position:absolute;left:29px;bottom:32px;display:flex;flex-direction:column;gap:2px;color:#765677}.stage-label span{font-size:9px;font-weight:900;letter-spacing:.19em}.stage-label b{font-size:29px;line-height:1.25;letter-spacing:-.08em}.stage-counter{position:absolute;right:30px;bottom:32px;color:#765677;font-size:20px;font-family:Georgia,serif}.stage-counter span{opacity:.4}.stage-counter i{font-style:normal;color:#e69aab;font-size:28px;margin-left:15px}
.controls{background:#fffdf7;padding:29px clamp(20px,2.25vw,38px) 20px;display:flex;flex-direction:column;min-width:0}.control-top{font-size:10px;font-weight:900;color:#9d8a9a;letter-spacing:.14em;display:flex;justify-content:space-between;border-bottom:1px solid #eadfe1;padding-bottom:18px}.control-top span:last-child{color:#d98ca2;font-size:23px;line-height:.5}.control-heading{padding:34px 0 26px}.step{font-size:11px;font-weight:800;color:#c580a2;letter-spacing:.1em}.control-heading h2{font-size:clamp(22px,1.75vw,30px);letter-spacing:-.08em;margin:10px 0 10px}.control-heading p{font-size:12px;color:#998c97;line-height:1.6;margin:0}.control-group{border:0;border-top:1px solid #ebe0e2;padding:25px 0 24px;margin:0;min-width:0}.control-group legend{float:left;width:100%;padding:0 0 17px;font-size:13px;font-weight:900;color:#584559;display:flex;gap:11px;align-items:center}.control-group legend span{font-size:10px;color:#c78ca7}.control-group legend small{font-size:9px;color:#aa9ba7;letter-spacing:.11em;margin-left:auto;font-weight:800}.choice-row{display:flex;width:100%;gap:8px}.choice-row button{border:1px solid #ece0e4;background:#fffaf7;color:#7d6c79;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}.choice-row button:hover{transform:translateY(-3px);box-shadow:0 6px 15px #c8a9b52b}.choice-row button.is-active{border-color:#c489b1;background:#f8eaf4;color:#664f75;box-shadow:0 4px 11px #d8b0c03b}.mood-choice{flex:1;min-width:0;height:75px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:800;white-space:nowrap}.face-icon{font-family:Georgia,serif;font-size:31px;line-height:1;color:#a879a8}.swatch-row{gap:5px}.swatch-choice{flex:1;border-radius:13px;min-width:0;height:71px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;font-size:9px;font-weight:800;white-space:nowrap}.swatch-choice i{width:25px;height:25px;border-radius:50%;background:var(--swatch);border:3px solid #fff;box-shadow:0 2px 9px #5b4b6b35}.world-row{gap:6px}.world-choice{flex:1;border-radius:12px;min-width:0;height:46px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;font-size:10px;font-weight:800}.world-dot{width:15px;height:15px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #ded1d6}.world-dot.cream{background:#efd69c}.world-dot.pink{background:#efaebc}.world-dot.blue{background:#a4d9e2}.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid #ebe0e2}.action-row button{height:49px;border-radius:12px;font-size:11px;font-weight:900}.shuffle{border:1px solid #d8cbd7;background:white;color:#866b89}.shuffle:first-letter{color:#da87a6}.save{border:1px solid #74558c;background:#70528a;color:white}.save span{margin-left:6px}.shuffle:hover,.save:hover{transform:translateY(-2px)}.control-hint{font-size:10px;color:#ab9eaa;text-align:center;margin:15px 0 0;min-height:14px}
.site-footer{height:44px;padding:0 clamp(24px,3.5vw,60px);border-top:1px solid #e4dcd2;display:flex;justify-content:space-between;align-items:center;color:#a99da6;font-size:9px;font-weight:800;letter-spacing:.11em}
@media(max-width:1160px){.workspace{grid-template-columns:25% 43% 32%}.intro{padding-left:25px;padding-right:18px}h1{font-size:34px}.intro-copy{font-size:11px}.controls{padding-left:18px;padding-right:18px}}
@media(max-width:850px){.site-header{height:70px}.header-note{display:none}.workspace{grid-template-columns:1fr 1fr;min-height:unset}.intro{grid-column:1/-1;padding:38px 30px 30px;display:block}.eyebrow{margin-bottom:15px}h1{font-size:42px}.intro-copy{margin-top:27px;font-size:13px}.intro-foot,.series,.charm-art{display:none}.stage{min-height:610px}.controls{min-height:610px}.site-footer span:last-child{display:none}}
@media(max-width:620px){.app{overflow:visible}.site-header{height:64px;padding:0 18px}.logo{font-size:23px}.logo-flower{width:34px;height:34px;font-size:26px}.edition{font-size:8px;gap:6px}.edition b{display:none}.workspace{display:flex;flex-direction:column}.intro{padding:27px 23px 21px}.eyebrow{font-size:9px;margin-bottom:10px}h1{font-size:clamp(33px,9vw,44px);line-height:1.37}.intro-copy{font-size:12px;line-height:1.75;margin:18px 0 0}.stage{min-height:475px;border-left:0;border-right:0}.stage-image{background-size:cover}.stage-top{top:17px;left:20px;right:20px}.character-wrap{inset:5% 0 4%}.character{height:99%}.stage-label{bottom:20px;left:20px}.stage-label b{font-size:23px}.stage-counter{right:18px;bottom:20px;font-size:16px}.controls{padding:24px 22px 25px;min-height:unset}.control-heading{padding:22px 0}.control-heading h2{font-size:27px}.control-group{padding:18px 0}.control-group legend{padding-bottom:13px}.mood-choice{height:65px}.swatch-choice{height:62px}.action-row{margin-top:0}.site-footer{height:42px;padding:0 18px}.site-footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.character-wrap{transform:none!important}}