.kuku-white-world, .kuku-white-world * { box-sizing: border-box; }
.kuku-white-world { container-name:kuku; container-type:inline-size; --ink:#23211e; --paper:#f4f1e8; --cream:#fff2d1; --orange:#d97039; --line:#b8ad98; width:100%; height:min(900px,92vh); min-height:620px; background:#15181b; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; overflow:hidden; }
.kw-shell { position:relative; width:100%; height:100%; background:var(--paper); border:1px solid #393d42; overflow:hidden; }
.kw-topbar { position:absolute; z-index:8; left:18px; right:18px; top:16px; min-height:82px; padding:13px 22px; display:flex; align-items:center; justify-content:space-between; color:var(--cream); background:linear-gradient(100deg,#24221f,#17191b 70%,#322a22); border:1px solid #8e8370; box-shadow:0 5px 18px #0005; }
.kw-topbar h1 { margin:0; font-family:Georgia,serif; font-size:clamp(28px,4vw,48px); line-height:1; letter-spacing:.025em; }
.kw-topbar p { margin:6px 0 0; font-size:10px; letter-spacing:.19em; }
.kw-status { display:flex; gap:15px; align-items:baseline; white-space:nowrap; font-size:11px; }
.kw-status b { font-size:26px; color:#ffd99a; }
.kw-status span:last-child { color:#bbdc8c; }
#kw-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; outline:none; }
.kw-mission { position:absolute; z-index:9; left:20px; top:112px; width:min(310px,calc(100% - 40px)); min-height:82px; padding:13px 16px; color:#f6eedc; background:#211f1ddd; border:1px solid #8b8170; box-shadow:3px 4px 0 #1118; font-size:12px; line-height:1.55; pointer-events:none; }
.kw-mission strong { display:block; color:#dc7442; letter-spacing:.16em; font-size:10px; margin-bottom:6px; }
.kw-place,.kw-points,.kw-help { position:absolute; z-index:8; bottom:18px; background:#24221fe8; color:#f8efd9; border:1px solid #8d816e; box-shadow:3px 3px 0 #1118; }
.kw-place { left:18px; padding:11px 15px; font-size:11px; letter-spacing:.1em; }
.kw-points { right:18px; bottom:18px; padding:8px 12px; display:flex; gap:10px; align-items:baseline; }
.kw-points span,.kw-points small { font-size:9px; color:#c8bda8; }.kw-points b { color:#ffd28a; font-size:21px; }
.kw-help { right:18px; bottom:72px; padding:8px 11px; font-size:10px; }
kbd { padding:2px 4px; background:#eee5d1; color:#27231f; border:0; border-radius:2px; font:700 9px ui-monospace,monospace; }
.kw-tools { position:absolute; z-index:10; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:3px; padding:4px; background:#26231f; border:1px solid #a09278; box-shadow:3px 3px 0 #1118; }
.kw-tools button { width:58px; height:49px; padding:4px 2px; background:#eee5d1; color:#292620; border:1px solid #92866f; font:9px ui-monospace,monospace; cursor:pointer; }
.kw-tools button b { display:block; font-size:17px; line-height:20px; }.kw-tools button span { display:block; }.kw-tools button.active { color:#fff1d0; background:#b85832; border-color:#ffcf84; }
.kw-color { position:relative; width:39px; height:49px; background:#eee5d1; border:1px solid #92866f; overflow:hidden; }.kw-color input { position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; }.kw-color span { display:block; width:25px; height:25px; margin:11px 6px; background:var(--paper); border:4px solid #d9d2bf; }
.kw-mobile-build { display:none; position:absolute; z-index:10; bottom:18px; left:50%; transform:translateX(-50%); padding:12px 22px; background:#d86c39; color:white; border:1px solid #ffcf8d; font:700 12px ui-monospace,monospace; }
.kw-toast { position:absolute; z-index:30; left:50%; bottom:91px; transform:translate(-50%,15px); padding:11px 16px; color:#fff5de; background:#211e1b; border:1px solid #e2c488; opacity:0; pointer-events:none; transition:.18s; }.kw-toast.show { opacity:1; transform:translate(-50%,0); }
.kw-modal-layer { position:absolute; z-index:50; inset:0; display:grid; place-items:center; padding:24px; background:#121518ba; backdrop-filter:blur(4px); }.kw-modal-layer[hidden] { display:none; }
.kw-modal { width:min(900px,100%); max-height:calc(100% - 20px); overflow:auto; padding:25px; background:#f7edcf; border:3px solid #29251f; outline:1px solid #e9c77e; box-shadow:12px 14px 0 #0007; }
.kw-modal h2 { margin:4px 0 14px; font:700 clamp(24px,4vw,39px)/1.1 Georgia,serif; }.kw-modal p { line-height:1.55; font-size:13px; }.kw-modal .eyebrow { margin:0; color:#ab512f; font-weight:700; font-size:10px; letter-spacing:.18em; }
.kw-choice { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.kw-modal button { padding:11px 15px; background:#eee4ca; color:#29251f; border:1px solid #82755e; font:700 11px ui-monospace,monospace; cursor:pointer; }.kw-modal button.primary { background:#303527; color:#fff1ce; border-color:#505b3d; }
.kw-error { padding:9px; color:#852f26; border:1px solid #bd6859; background:#ffe0d6; }.kw-code-input { width:100%; padding:13px; font:15px ui-monospace,monospace; text-transform:uppercase; border:2px solid #736650; background:#fffaf0; }
.kw-creator { display:grid; grid-template-columns:270px 1fr; align-items:start; gap:24px; }.kw-preview-wrap { position:sticky; top:0; text-align:center; }.kw-preview-wrap small { display:block; margin-top:5px; color:#766b59; font-size:9px; letter-spacing:.13em; }.kw-creator canvas { display:block; width:240px; height:330px; margin:auto; background:#ded8c8; border:1px solid #8e816a; image-rendering:pixelated; }.kw-creator label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; }.kw-creator input[type=text],.kw-creator input:not([type]) { display:block; width:100%; margin:6px 0 14px; padding:10px; border:1px solid #897b64; font:14px ui-monospace,monospace; background:#fffaf0; }
.kw-editor-section { margin:12px 0; padding:12px; border:1px solid #b9a889; background:#fff6df; }.kw-editor-section>b { display:block; margin-bottom:10px; color:#a44e31; font-size:10px; letter-spacing:.14em; }
.kw-range { display:grid!important; grid-template-columns:150px 1fr; gap:12px; align-items:center; margin:8px 0; }.kw-range input[type=range] { appearance:none; width:100%; height:18px; margin:0; padding:0; border:1px solid #746a5a; border-radius:0; background:var(--range-gradient); cursor:pointer; }.kw-range input[type=range]::-webkit-slider-thumb { appearance:none; width:12px; height:26px; background:#fff8e8; border:2px solid #29251f; box-shadow:2px 2px 0 #0004; }.kw-range input[type=range]::-moz-range-thumb { width:10px; height:24px; border-radius:0; background:#fff8e8; border:2px solid #29251f; }
.kw-selector { display:grid; grid-template-columns:92px 1fr; align-items:start; gap:8px; margin:8px 0; font-size:10px; font-weight:700; letter-spacing:.08em; }.kw-selector>span { padding-top:7px; }.kw-selector>div { display:flex; gap:4px; flex-wrap:wrap; }.kw-selector button { min-width:42px; padding:6px 7px; font-size:8px; }.kw-selector button.active { color:white; background:#b45935; }
.kw-toggle { display:block; margin-top:15px; font-size:11px; line-height:1.4; }.kw-toggle input { vertical-align:middle; margin-right:7px; }.kw-recovery { margin:20px 0; padding:18px 8px; text-align:center; word-break:break-word; font:700 clamp(14px,3vw,21px) ui-monospace,monospace; color:#fff3d2; background:#29251f; border:2px dashed #e1b965; letter-spacing:.08em; }
.kw-stock { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:15px 0; }.kw-stock span { padding:10px; border:1px solid #ab9a79; background:#fff7e2; }.kw-stock b { float:right; }
@media(max-width:820px){
  .kuku-white-world { height:100svh; min-height:520px; }.kw-topbar { left:8px; right:8px; top:8px; min-height:65px; padding:9px 12px; }.kw-topbar h1 { font-size:25px; }.kw-topbar p { font-size:7px; }.kw-status { gap:7px; }.kw-status span:first-child { display:none; }.kw-status b { font-size:18px; }.kw-status span:last-child { font-size:8px; }
  .kw-mission { left:9px; top:82px; min-height:65px; padding:9px 11px; width:235px; font-size:10px; }.kw-place { left:8px; bottom:9px; padding:8px 9px; }.kw-points { right:8px; bottom:9px; }.kw-help { display:none; }
  .kw-tools { display:none; bottom:61px; width:calc(100% - 16px); max-width:430px; flex-wrap:wrap; justify-content:center; }.kw-tools.mobile-open { display:flex; }.kw-tools button { width:51px; }.kw-mobile-build { display:block; bottom:9px; }.kw-toast { bottom:69px; max-width:90%; text-align:center; }
  .kw-modal-layer { padding:10px; }.kw-modal { padding:18px; }.kw-creator { grid-template-columns:120px 1fr; gap:12px; }.kw-creator canvas { width:120px; height:147px; }.kw-selector { grid-template-columns:1fr; }.kw-stock { grid-template-columns:1fr; }
}
@media(max-width:480px){ .kw-topbar p{display:none}.kw-mission{top:79px}.kw-creator{grid-template-columns:1fr}.kw-creator canvas{justify-self:center;width:120px;height:147px}.kw-modal h2{font-size:25px}.kw-status span:last-child{display:none} }

@container kuku (max-width:1000px){
  .kw-topbar { left:8px; right:8px; top:8px; min-height:70px; padding:9px 13px; gap:12px; }
  .kw-topbar h1 { max-width:none; white-space:nowrap; font-size:clamp(24px,4.2cqw,34px)!important; line-height:1!important; }
  .kw-topbar p { margin-top:5px; font-size:7px; }.kw-status { gap:7px; font-size:8px; }.kw-status b { font-size:20px; }
  .kw-mission { left:10px; top:88px; width:270px; min-height:66px; padding:9px 12px; font-size:10px; }
  .kw-help { display:none; }.kw-tools button { width:51px; }.kw-tools { max-width:440px; }.kw-points { right:8px; }.kw-place { left:8px; }
  .kw-modal-layer { padding:10px; }.kw-modal { padding:18px; }.kw-creator { grid-template-columns:210px 1fr; gap:15px; }.kw-creator canvas { width:190px; height:261px; }
  .kw-range { grid-template-columns:125px 1fr; }
}
@container kuku (max-width:620px){
  .kw-topbar { min-height:60px; }.kw-topbar h1 { font-size:clamp(20px,6.3cqw,29px)!important; }.kw-topbar p,.kw-status span { display:none; }.kw-status b { display:block; font-size:17px; }
  .kw-mission { top:75px; width:230px; }.kw-tools { display:none; bottom:61px; width:calc(100% - 16px); flex-wrap:wrap; justify-content:center; }.kw-tools.mobile-open { display:flex; }.kw-mobile-build { display:block; bottom:9px; }.kw-points { bottom:9px; }.kw-place { bottom:9px; }.kw-toast { bottom:69px; }
  .kw-creator { grid-template-columns:1fr; }.kw-preview-wrap { position:static; }.kw-creator canvas { width:165px; height:227px; }.kw-customize { min-width:0; }.kw-range { grid-template-columns:110px 1fr; }.kw-selector { grid-template-columns:72px 1fr; }
}

.kw-creator .kw-preview-wrap{position:sticky;top:0;align-self:start}.kw-wardrobe-save{position:sticky;bottom:-1px;background:#f5edcf;padding:12px 0;z-index:2}.kw-editor-section summary{cursor:pointer;padding:8px 0;font-weight:bold}@media(max-width:650px){.kw-creator .kw-preview-wrap{position:static}.kw-wardrobe-save{bottom:0}}