@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;800&display=swap');
:root{color-scheme:dark;--pink:#f197be;--line:#493346;--surface:#20171f}*{box-sizing:border-box}body{margin:0;background:#100e13;color:#f4e6ee;font:16px/1.6 system-ui,sans-serif}button,input,select,textarea{font:inherit}button,.button{cursor:pointer;border:1px solid var(--line);background:#30222e;color:#f8eaf2;padding:10px 14px;border-radius:6px;min-height:44px}button:hover,.button:hover{border-color:var(--pink);background:#48303f}button:disabled{opacity:.35;cursor:default}.primary{background:#ec88b2;color:#231322;border-color:#ec88b2;font-weight:700}.outline{border-color:#b05c82;color:#f5b4d1;background:none}header{display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;border-bottom:1px solid var(--line)}.brand{color:#f2c4d9;text-decoration:none;letter-spacing:.15em;font-size:16px}.brand small{display:block;letter-spacing:.2em;font-size:12px;color:#b69aaa}main{max-width:1500px;margin:auto;padding:25px 4vw}.intro{display:flex;justify-content:space-between;align-items:end;margin:0 0 26px}.eyebrow{font-size:12px;letter-spacing:.23em;color:#d897b4;margin:0 0 8px}h1{font:600 clamp(28px,3vw,44px)/1.35 'Noto Serif JP',serif;margin:0}h1 span{display:block;font:14px/1.6 system-ui;color:#bda7b4;margin-top:8px}.intro>p{color:#bda7b4;font-size:14px;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start}.stage{position:sticky;top:12px;background:#1b151d;border:1px solid var(--line);border-radius:8px;overflow:hidden}.stagebar,.stagefooter{display:flex;align-items:center;justify-content:space-between;padding:10px 17px;font-size:12px;color:#ba9fad;gap:12px}.stagebar>span{letter-spacing:.12em}.stagebar small{display:block;letter-spacing:0}.stagebar button{padding:3px 13px;font-size:24px}.canvaswrap{background:radial-gradient(ellipse,#43303e,#201922);padding:16px;display:flex;justify-content:center}canvas{display:block;width:100%;max-width:min(650px,calc((100vh - 230px)*.9));height:auto;touch-action:none;border-radius:3px;box-shadow:0 12px 45px #0009}.savebar{display:flex;gap:8px;padding:14px;border-top:1px solid var(--line)}.savebar button{font-size:14px}.savebar .primary{margin-left:auto}aside{background:#1b151d;border:1px solid var(--line);border-radius:8px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}.modes .active{background:#60334d;border-color:#ce719b}.tabs{display:flex;border-bottom:1px solid var(--line)}.tabs button{flex:1;border:0;border-radius:0;background:none;font-size:14px}.tabs .active{color:#ffb9d8;border-bottom:2px solid var(--pink)}.panel,.selection{padding:20px}.selection{border-top:1px solid var(--line)}h2{font-size:17px;font-weight:600;margin:0 0 15px}.sectiontitle{display:flex;justify-content:space-between;align-items:center}.sectiontitle button{font-size:13px;padding:7px 9px}.sectiontitle h2{margin:0}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;font-size:14px;color:#ceb7c5;margin-top:14px}input:not([type=range]),textarea,select{display:block;width:100%;margin-top:6px;background:#120f17;color:#f8edf5;border:1px solid #503a4b;border-radius:5px;padding:10px;min-height:44px}input[type=color]{padding:4px!important;height:44px}input[type=range]{width:100%;accent-color:#f197be;display:block;margin-top:12px;min-height:24px}.hint{font-size:13px;line-height:1.65;color:#ad94a4}.actions{display:flex;gap:8px;margin-top:18px}.actions button{flex:1;font-size:14px;padding:8px}.danger{color:#ff9caa}#roomlist{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0}#roomlist button{font-size:12px;padding:6px 9px;min-height:36px}#roomlist .active{border-color:#e394b7;background:#4d2a40}#catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#catalog button{padding:5px;font-size:12px;background:#281b29}#catalog .thumb{display:block;margin:0 auto;width:70px;height:70px;background-image:url('furniture.png');background-size:400% 300%;background-repeat:no-repeat}.stagefooter #status{font-size:12px;letter-spacing:0}footer{display:flex;justify-content:space-between;align-items:center;padding:28px 0;color:#9e8595;font-size:12px}footer p{font-size:13px}dialog{background:#211724;color:#f5e7ef;border:1px solid #915875;border-radius:12px;padding:25px;max-width:540px;width:calc(100% - 28px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#080610cf;backdrop-filter:blur(5px)}#complete{text-align:center}#result{width:100%;max-height:53dvh;object-fit:contain;margin-bottom:15px}.button{display:block;text-decoration:none}#complete button{margin-top:10px}.close{position:absolute;right:10px;top:0;font-size:22px}.promotion{border-top:1px solid var(--line);padding-top:15px;margin-top:22px;font-size:14px}.promotion h3{letter-spacing:.16em}.promotion a{color:#ffaed3}.promotion p{color:#bda5b5}details{margin-top:18px}summary{font-size:14px;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f9bddd;outline-offset:3px}[hidden]{display:none!important}
@media(max-width:850px){main{padding:18px 12px}.workspace{grid-template-columns:1fr;gap:16px}.stage{top:0;z-index:3}.canvaswrap{padding:8px}canvas{max-width:360px;max-height:43dvh;width:auto;max-width:100%;aspect-ratio:9/10}.intro{margin-bottom:16px}.intro>p{display:none}h1{font-size:27px}.eyebrow{font-size:10px}.stagebar{padding:5px 10px}.stagebar>span{font-size:10px}.stagebar small{font-size:11px}.stagebar button{min-height:32px;font-size:20px}.stagefooter{padding:4px 10px}.savebar{padding:8px;gap:5px}.savebar button{font-size:12px;padding:8px}.panel,.selection{padding:16px}header{padding:12px}.brand{font-size:13px}header button{font-size:13px}footer{flex-wrap:wrap;gap:8px}footer p{width:100%;order:3;margin:0}#catalog{grid-template-columns:repeat(4,1fr)}#catalog .thumb{width:60px;height:60px}}

.mobileonly{display:none}
html{scroll-padding-bottom:32px}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:850px){
 .workspace{min-width:0}.stage{top:0}.stagebar{gap:6px}.stagebar .mobileonly{display:block;font-size:12px;padding:4px 8px;white-space:nowrap;min-height:36px}.stagebar>span{min-width:0;flex:1}.stagebar small{display:none}.stagebar>div{display:flex;gap:4px}
 canvas{width:min(100%,calc(28svh * .9));height:auto;max-height:none;max-width:100%;aspect-ratio:9 / 10}
 .compact-preview canvas{width:min(100%,calc(16svh * .9))}
 .stagefooter{flex-wrap:wrap;gap:2px}.stagefooter>span:last-child{display:none}.savebar{flex-wrap:wrap}.savebar button{flex:1;white-space:nowrap}.savebar .primary{margin-left:0}
 aside{min-width:0;margin-bottom:calc(32px + env(safe-area-inset-bottom,0px))}.selection{padding-bottom:28px}input:not([type=range]),textarea,select{font-size:16px}
 dialog{max-height:calc(100svh - 32px);padding-bottom:calc(25px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
 body:has(aside input:focus,aside textarea:focus,aside select:focus) canvas{width:min(100%,calc(16svh * .9))}
}
@media(max-width:850px) and (max-height:500px){.stage{position:relative;top:auto}canvas{width:min(100%,220px)}}

.templates{padding:18px 14px 4px;border-bottom:1px solid var(--line)}.templates h2{margin-bottom:5px}.templates .hint{margin:5px 0 13px}.templategrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px}.templatecard{padding:7px;background:#151018;text-align:left}.templatecard img{width:100%;aspect-ratio:9/10;object-fit:contain;display:block;border-radius:3px}.templatecard strong{display:block;font-size:13px;margin-top:6px}.templatecard small{display:block;font-size:11px;line-height:1.5;color:#bca2b1}.templatecard.active{border:2px solid #f0a5c9;background:#42243a}.templatecard[data-template=music].active{border-color:#baa3ed}.templatecard[data-template=memory].active{border-color:#c4b4c6}.templatecard[data-template=crimson].active{border-color:#d9a47f}
@media(max-width:850px){.templates{padding:14px}.templategrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.templatecard{padding:4px}.templatecard strong{font-size:11px;line-height:1.5}.templatecard small{display:none}}

.headeractions{display:flex;align-items:center;gap:8px}#helpdialog{max-width:650px;text-align:left;padding-top:30px}#helpdialog h2{padding-right:35px;font-size:21px}.helpintro{color:#ddc6d4}.helpsteps{padding-left:25px;margin:20px 0}.helpsteps li{padding-left:5px;margin-bottom:24px}.helpsteps h3{font-size:17px;color:#f3b3d1;margin:0 0 8px}.helpsteps p,.helpnote p{font-size:15px;line-height:1.85;margin:8px 0}.helpnote{padding:15px;background:#382333;border:1px solid #86506e;border-radius:6px;margin-bottom:20px}.helpnote h3{font-size:17px;margin:0 0 8px}#helpdone{width:100%}
@media(max-width:450px){.headeractions{gap:5px}.headeractions button{font-size:12px;padding:8px}.brand{font-size:11px;letter-spacing:.08em}}

.moodsets{padding:18px 14px;border-bottom:1px solid var(--line)}.moodsets h2{margin-bottom:6px}.moodsets label{margin-top:8px}.moodgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.moodgrid button{padding:7px;text-align:left;background:#130d18}.moodgrid img{width:100%;display:block;aspect-ratio:9/10;object-fit:contain}.moodgrid strong{display:block;font-size:14px}.moodgrid small{display:block;font-size:11px;color:#bfa9b9}.moodgrid .active{border:2px solid #f18dbb;background:#382035}.moodgrid [data-mood=neon].active{border-color:#d778ff;box-shadow:0 0 12px #ba42ff45}.moodgrid [data-mood=ink].active{border-color:#bdb4c6;background:#0b090f}#catalog{margin-top:15px}@media(max-width:850px){.moodgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.moodgrid button{padding:4px}.moodgrid strong{font-size:12px}.moodgrid small{display:none}}

.connections{border:1px solid #70415d;border-radius:6px;padding:12px;margin-bottom:20px}.connections legend{color:#f3b3d1;font-size:14px;padding:0 6px}.checklabel{display:flex;align-items:center;gap:8px}.checklabel input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;accent-color:#ef8abd}.connections .hint{margin-bottom:0}
