.rj[data-screen=creative]{background:#e9dfc6}
.rj[data-screen=creative]>header,.rj[data-screen=creative]>.hud,.rj[data-screen=creative]>footer{display:none}
.rj[data-screen=creative] main{max-width:1200px;padding:0 24px 24px;min-height:100dvh}
.rj[data-screen=creative] #notice:empty{display:none}
.creative-workspace{--creative-ink:#344b3d;--creative-muted:#62664e;--creative-green:#365b42;color:var(--creative-ink);padding:max(18px,env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);font:15px/1.5 system-ui,sans-serif}
.creative-workspace *{box-sizing:border-box}
.creative-workspace [hidden]{display:none!important}
.creative-workspace button{min-height:44px;border:1px solid #858969;border-radius:10px;padding:10px 13px;background:#fff9e9;color:var(--creative-ink);font:600 14px/1.35 system-ui,sans-serif;box-shadow:0 2px 0 #c3b697;transition:background .12s,transform .12s;overflow-wrap:anywhere}
.creative-workspace button:hover:not(:disabled){background:#f8eabe}
.creative-workspace button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #c3b697}
.creative-workspace button:disabled{opacity:.48;box-shadow:none;cursor:default}
.creative-workspace button[aria-pressed=true]{border:1px solid #466346;background:#dce7c8;box-shadow:inset 0 0 0 1px #466346,0 2px 0 #b6bd9c}
.creative-workspace button:focus-visible,.creative-workspace summary:focus-visible{outline:3px solid #a84020;outline-offset:3px}
.creative-workspace h1,.creative-workspace h2,.creative-workspace p{margin:0}
.creative-workspace h1{font:clamp(27px,3.4vw,42px)/1.13 Georgia,serif;overflow-wrap:anywhere}
.creative-workspace h1:focus{outline:none}
.creative-workspace h2{font:23px/1.2 Georgia,serif}
.creative-header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px;margin-bottom:22px}
.creative-back{grid-column:1/-1;justify-self:start;background:transparent!important;box-shadow:none!important;border-color:transparent!important;padding-left:0!important}
.creative-heading{min-width:0}
.creative-eyebrow{font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px!important;color:#677253}
.creative-subtitle{font-size:14px;color:var(--creative-muted);margin-top:9px!important}
.creative-history{display:flex;gap:8px;flex-wrap:wrap}
.creative-history button{background:#eee5ce;white-space:nowrap}
.creative-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:26px;align-items:start}
.creative-canvas,.creative-tools{min-width:0}
.creative-canvas{position:sticky;top:18px}
.creative-preview{margin:0;background:#f4e7ca;border:1px solid #cfc09b;border-radius:26px 26px 12px 12px;padding:22px 6px 15px;box-shadow:0 9px 0 #bdac8840,0 16px 26px #84725218;overflow:hidden}
.creative-food svg{display:block;width:100%;height:auto;max-height:410px}
.creative-preview figcaption{padding:5px 16px 0;text-align:center;color:#69634c;font-size:12px;overflow-wrap:anywhere}
.creative-piece-tools{margin:25px 5px 0}
.creative-piece-title,.creative-prep-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.creative-piece-title>span{font-size:12px;color:var(--creative-muted);white-space:nowrap}
.creative-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.creative-pieces button{display:flex;align-items:center;gap:8px;text-align:left;font-size:12px;padding:9px 8px;min-height:54px}
.creative-piece-number{flex:none;display:grid;place-items:center;width:25px;height:25px;border:1px solid #aaa881;border-radius:50%;font-weight:700;background:#eee3c0}
.creative-mode-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.creative-mode-tools button{font-size:12px}
.creative-help{color:var(--creative-muted);font-size:13px;line-height:1.6;margin:9px 0 12px!important}
.creative-placement{padding:20px;background:#f4eedc;border:1px solid #cfc6ac;border-radius:18px}
.creative-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-radius:22px;padding:13px;background:radial-gradient(ellipse at center,#f8f5e6 44%,#e2e1c8 45%,#efedda 66%,#bec7a5 67%,#d2d5b8 70%,#f4eedc 71%)}
.creative-workspace .creative-slot-grid button{min-height:80px;padding:8px 3px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffbedc9;box-shadow:none;border:1px dashed #989e77}
.creative-slot-grid button[data-occupied=true]{border-style:solid;background:#e8ebd3}
.creative-workspace .creative-slot-grid button[data-selected=true]{outline:2px solid #426447;outline-offset:-3px;background:#dce6c5}
.creative-slot-number{position:absolute;top:3px;left:6px;color:#737757;font-size:10px}
.creative-slot-dot{display:block;min-height:24px;font-size:18px;line-height:1.2;font-weight:600;max-width:100%;overflow-wrap:anywhere;padding:2px 3px}
.creative-slot-grid button[data-occupied=true] .creative-slot-dot{font-size:12px;padding-top:7px;color:#35533b}
.creative-slot-name{font-size:10px;line-height:1.2;color:#535d45;margin-top:4px;text-transform:capitalize}
.creative-map-help{font-size:11px;line-height:1.55;color:var(--creative-muted);margin-top:13px!important}
.creative-preparation{padding:22px 1px 10px;border-bottom:1px solid #c2bba3}
#creative-ready{font-size:11px;color:#735d36;white-space:nowrap}
#creative-ready[data-ready=true]{color:#385a35}
.creative-workspace .creative-primary{background:var(--creative-green);border-color:var(--creative-green);color:#fff8df;box-shadow:0 2px 0 #243d2c}
.creative-workspace .creative-primary:hover:not(:disabled){background:#466d50}
#creative-prepare{margin-bottom:13px;width:100%}
.creative-components{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.creative-components button{display:flex;gap:7px;align-items:center;min-width:0;text-align:left;font-size:12px;flex:1 1 42%}
.creative-check{font-size:16px;flex:none}
.creative-options{margin:11px 0 0}
.creative-options summary{font-size:13px;font-weight:600;min-height:44px;padding:12px 2px;cursor:pointer}
.creative-options fieldset{border:0;padding:0;margin:12px 0}
.creative-options legend{font-size:12px;margin-bottom:8px;padding:0;color:var(--creative-muted)}
.creative-options-row{display:flex;flex-wrap:wrap;gap:8px}
.creative-options-row button{flex:1 1 70px;font-size:12px}
.creative-pattern-sample{display:block!important;width:24px;height:14px;margin:0 auto 4px;border:1px solid #9d946b;border-radius:50%;background:#efe3bf}
.creative-pattern-sample[data-pattern-sample=garis]{background:repeating-linear-gradient(45deg,#efe3bf 0 4px,#a28f64 4px 6px)}
.creative-pattern-sample[data-pattern-sample=bunga]{background:radial-gradient(circle at center,#b37b51 0 3px,transparent 3px),#efe3bf}
.creative-unlock{font-size:11px;color:var(--creative-muted);margin-top:13px!important}
.creative-ending{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:20px 0 0;border-top:1px solid #c5b99a}
.creative-feedback{min-height:22px;flex:1;font-size:13px;color:#725233;overflow-wrap:anywhere}
.creative-ending-actions{display:flex;flex-wrap:wrap;gap:9px}
.creative-workspace[data-reduced-motion=true] *{transition:none!important;animation:none!important}
.kitchen-shell .creative-open{position:absolute;top:195px;left:20px;z-index:11;min-height:44px;padding:10px 15px;background:#fff4dfea;border:1px solid #bbad86;color:#485337;border-radius:12px;font:600 13px/1.3 system-ui;box-shadow:0 3px 10px #283b2422}
@media(max-width:760px){
 .rj[data-screen=creative] main{padding:0 16px 20px}
 .creative-header{gap:12px;margin-bottom:17px}
 .creative-heading{grid-column:1/-1}
 .creative-history{grid-column:1/-1}
 .creative-layout{grid-template-columns:minmax(0,1fr);gap:22px}
 .creative-canvas{position:static}
 .creative-preview{padding-top:7px}
 .creative-food svg{max-height:340px}
 .creative-piece-tools{margin-top:22px}
 .creative-tools{display:grid;grid-template-columns:minmax(0,1fr)}
 .creative-placement{padding:17px}
 .creative-slot-grid{max-width:390px;width:100%;margin:auto;padding:12px}
 .creative-slot-grid button{min-height:76px!important}
 .creative-slot-name{font-size:11px}
 .creative-ending{display:block;margin-top:20px;padding-top:15px}
 .creative-ending-actions{margin-top:10px}
 .creative-ending-actions button{flex:1 1 160px}
 .kitchen-shell .creative-open{left:12px;top:191px}
}
@media(max-width:360px){
 .rj[data-screen=creative] main{padding-left:12px;padding-right:12px}
 .creative-workspace h1{font-size:27px}
 .creative-pieces{gap:5px}
 .creative-pieces button{gap:4px;padding:8px 5px;font-size:10px}
 .creative-piece-number{width:22px;height:22px}
 .creative-placement{padding:13px}
 .creative-slot-grid{padding:8px;gap:6px}
 .creative-slot-name{font-size:10px}
 .creative-mode-tools button{flex:1 1 120px}
}
@media(prefers-reduced-motion:reduce){.creative-workspace *{animation:none!important;transition:none!important}}
