@font-face{font-family:SlimeRound;src:local("Aptos"),local("Trebuchet MS");font-display:swap}
:root{color-scheme:light;--paper:#f7f4fc;--ink:#392b50;--muted:#746785;--accent:#7956d8;--line:#e5dcf0;--shadow:0 4px 10px #392b5010}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 SlimeRound,"Trebuchet MS",system-ui,sans-serif}button,input,select{font:inherit}button,.import-label{min-height:44px;border:1px solid var(--line);border-radius:14px;padding:9px 16px;color:var(--ink);background:#fff;box-shadow:var(--shadow);font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;justify-content:center;align-items:center;transition:background .15s,transform .15s,border-color .15s}button:hover,.import-label:hover{background:#f0eafb;border-color:#c2aae8}button:active{transform:translateY(1px)}button:disabled{opacity:.43;cursor:default}button[aria-pressed=true],button[data-selected=true],button[aria-expanded=true]{color:#fff;background:var(--accent);border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,.import-label:focus-visible,summary:focus-visible{outline:3px solid #9767df;outline-offset:4px}.primary{background:linear-gradient(135deg,#9766ec,#7350cc);border-color:#8054d7;color:white;box-shadow:0 5px 13px #7956d82b}.primary:hover{background:#7956d8;color:white}.skip{position:absolute;top:-100px;z-index:50;background:#fff;padding:12px}.skip:focus{top:10px}h1,h2,h3,p{margin:0}h1{font-size:36px;line-height:1.15;letter-spacing:-1.3px;font-weight:800}h2{font-size:24px;line-height:1.2;letter-spacing:-.4px}h3{font-size:19px}a{color:#7251ba}#app{max-width:1600px;padding:14px 28px 32px;margin:auto}.app-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 18px}.app-header p{color:var(--muted);font-size:15px;margin-top:5px}.header-actions{display:flex;gap:10px}.header-actions button{background:#ffffffb0}#gallery-count{font-size:12px;background:#eee6f9;border-radius:20px;min-width:23px;padding:1px 5px}.workbench{display:grid;grid-template-columns:258px minmax(0,1fr);gap:18px;height:clamp(430px,calc(100svh - 233px - var(--nav-overflow,0px)),720px)}.ingredients{background:#ffffffd9;border:1px solid var(--line);border-radius:25px;padding:16px;box-shadow:0 8px 30px #56427306;display:flex;flex-direction:column;min-height:0;position:relative;z-index:3}.ingredient-tabs{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:2px;background:#f4effb;border-radius:13px;padding:3px}.ingredient-tabs button{border:none;box-shadow:none;min-height:44px;font-size:13px;padding:6px 3px;background:transparent;border-radius:11px}.ingredient-tabs button[aria-expanded=true]{background:var(--accent)}.ingredient-body{padding-top:14px;overflow:auto;min-height:0;scrollbar-width:thin}.panel-top{display:flex;align-items:center;justify-content:space-between}.panel-top h2{font-size:21px}.panel-top #drawer-close{display:none}.ingredient-body p{font-size:14px;color:var(--muted);line-height:1.45;margin:8px 0 12px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{position:relative;min-height:44px;width:44px;height:44px;justify-self:center;aspect-ratio:1;padding:0;border:3px solid #fff;border-radius:50%;background:radial-gradient(ellipse at 32% 22%,#ffffffa0 0 7%,#ffffff20 15%,transparent 33%),var(--color);box-shadow:inset 0 -3px 4px #392b501a,0 3px 6px #392b5015}.swatch:hover{background:radial-gradient(ellipse at 32% 22%,#ffffffa0 0 7%,transparent 33%),var(--color)}.swatch[data-selected=true]{background:radial-gradient(ellipse at 32% 22%,#ffffffa0 0 7%,transparent 33%),var(--color);outline:3px solid var(--accent);outline-offset:2px}.charms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.charm-button{min-width:0;padding:2px;border-radius:13px;background:#f9f7fd;aspect-ratio:1}.charm-art{width:40px;height:40px;display:block;background-image:url('./assets/charms.webp');background-size:400% 400%;background-position:calc(var(--column)*100%/3) calc(var(--row)*100%/3)}.ingredient-bottom{margin-top:12px;display:flex;flex-direction:column;gap:12px}.ingredient-bottom button{width:100%;background:#f5f0fb}.ingredient-bottom button[aria-pressed=true]{background:var(--accent);color:#fff}.ingredient-bottom label{font-size:14px;display:flex;align-items:center;gap:8px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.glitter-styles,.table-styles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}.glitter-styles button{text-transform:capitalize;font-size:14px}.table-styles button{background:var(--color);color:#3f324b;box-shadow:inset 0 0 0 2px #ffffff80}.table-styles [data-table=dark]{color:white}.table-styles [data-selected=true]{outline:3px solid var(--accent);outline-offset:2px}.tray-label{display:flex;flex-direction:column;gap:7px;font-size:14px}.tray-label select{padding:12px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);min-height:44px}.slime-workspace{display:flex;flex-direction:column;min-height:0;gap:8px}#stage{flex:1;min-height:160px;position:relative;border-radius:28px;overflow:hidden;background:#eee8f7;box-shadow:inset 0 3px 10px #8f73b328,inset 0 0 0 8px #ffffff70;border:1px solid #ddd1eb;isolation:isolate}#stage[data-table=white]{background:#f9f9ff}#stage[data-table=pink]{background:#fae7ef}#stage[data-table=lavender]{background:#eee8f7}#stage[data-table=blue]{background:#e5f1f8}#stage[data-table=wood]{background:repeating-linear-gradient(2deg,#e2c6aa,#e2c6aa 3px,#ddbea0 4px,#e4cbaf 8px)}#stage[data-table=dark]{background:#34303f;border-color:#463d57}.creation-name{position:absolute;top:18px;left:22px;color:#78658c;font-size:14px;pointer-events:none;z-index:2}#stage[data-table=dark] .creation-name{color:#d4c6e3}#stage[data-tray=round]{border-radius:46%/45%;box-shadow:inset 0 0 0 8px #ffffff90,inset 0 0 0 12px #d8c9e0}#stage[data-tray=round] .creation-name{left:50%;top:14px;transform:translateX(-50%);max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 8px;border-radius:20px;background:#ffffffcc;color:var(--ink)}#stage[data-tray=none]{box-shadow:none;border-color:transparent}#stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}#slime{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;outline-offset:-8px}#slime:active{cursor:grabbing}.shadow-layer,.decor-layer,.fallback-layer{pointer-events:none}.actions{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;border:1px solid var(--line);background:#ffffffa8;border-radius:20px;padding:9px}.actions button{flex-direction:column;gap:3px;padding:7px 3px;border-radius:13px;font-size:13px;min-height:64px;background:#f6f2fc}.actions button[aria-pressed=true]{background:var(--accent);color:white}.actions svg{width:21px;height:21px}.gesture-hint{font-size:13px;text-align:center;color:var(--muted);min-height:20px}.bench-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 0}.utility-actions{display:flex;gap:10px}.bench-footer .primary{min-width:170px}#notice{min-height:22px;font-size:13px;color:var(--muted);margin-top:8px}#notice.error{color:#9a3856}#stage-message{position:absolute;bottom:18px;left:15%;right:15%;background:#ffffffeb;border-radius:12px;padding:10px;text-align:center;font-size:14px;pointer-events:none;z-index:4}#cursor{position:absolute;pointer-events:none;width:18px;height:18px;border:2px solid #7651ba;border-radius:50%;transform:translate(-50%,-50%);z-index:6}.guide{border-top:1px solid var(--line);margin-top:50px;padding:32px 6%;color:var(--muted);line-height:1.7}.guide h2,.guide h3{color:var(--ink);margin-bottom:12px}.guide p{margin:12px 0}.guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:28px 0}.guide details{border-bottom:1px solid var(--line);padding:14px 0}.guide summary{cursor:pointer;color:var(--ink);font-weight:600;min-height:30px}.related{font-size:14px}dialog{color:var(--ink);background:#fcfaff;border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 80px #392b5038;max-width:min(92vw,530px);padding:26px;max-height:88svh;overflow:auto}dialog::backdrop{background:#392b504a;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.dialog-heading button{padding:8px 12px;font-size:13px}.dialog-heading p{font-size:14px;color:var(--muted);margin-top:6px}#save-preview{width:100%;height:190px;object-fit:contain;border-radius:20px;background:#eee8f7;margin-bottom:20px}#save-form label{display:block;font-weight:600;margin-bottom:8px}.name-row{display:flex;gap:8px}.name-row input{width:100%;min-width:0;min-height:48px;border:1px solid #d6c7e7;border-radius:12px;background:white;padding:10px 12px;color:var(--ink)}.name-row button{font-size:13px;white-space:nowrap}.dialog-note{margin:18px 0;color:var(--muted);font-size:14px}#confirm-save{width:100%}#gallery-dialog{width:900px;max-width:95vw}#gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.slime-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.slime-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee8f7;display:block}.slime-card h3{font-size:17px;padding:13px 14px 0;overflow-wrap:anywhere}.slime-card p{padding:3px 14px 10px;color:var(--muted);font-size:12px}.slime-card .card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px 12px}.card-actions button{font-size:12px;padding:7px 4px;border-radius:10px;min-height:44px}.gallery-footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}#gallery-notice{margin-top:12px;font-size:14px;color:var(--muted)}.empty-gallery{grid-column:1/-1;text-align:center;padding:50px 10px;color:var(--muted)}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#confirm-message{margin-top:14px;color:var(--muted)}body.playing .ingredients{display:none}body.playing .workbench{grid-template-columns:minmax(0,1fr)}body.playing .guide{display:none}body.playing #subtitle{display:none}body.playing .workbench{height:clamp(430px,calc(100svh - 210px - var(--nav-overflow,0px)),860px)}body .rex-progress-pill{position:static!important;inset:auto!important;max-width:none;width:fit-content;margin-top:12px;box-shadow:none;border:1px solid var(--line);background:#ffffff90;color:var(--muted);backdrop-filter:none;font:600 12px/1.4 SlimeRound,system-ui,sans-serif}body .rex-progress-pill button{background:#7956d8;color:#fff}.header-actions #sound[aria-pressed=true]{color:var(--ink);background:#ffffffb0;border-color:var(--line)}[hidden]{display:none!important}
/* Give the material the space previously occupied by repeated desktop chrome. */
@media(min-width:721px){
 h1{font-size:32px}.app-header{margin-bottom:14px}.app-header p{display:none}
 .workbench{height:clamp(430px,calc(100svh - 207px - var(--nav-overflow,0px)),746px)}
 .ingredients{background:#ffffff85;box-shadow:none}.panel-top h2{font-size:18px}
 .actions{background:transparent;border-color:transparent;padding:5px 0;gap:8px}
 .actions button{background:#ffffffa6}.actions button[aria-pressed=true]{background:var(--accent)}
}
@media(min-width:1100px){.actions button{flex-direction:row;gap:7px;min-height:48px}}
@media(min-width:1800px){#app{padding-top:24px}.workbench{height:min(72vh,850px)}}
@media(max-width:1050px){#app{padding:12px 16px 30px}.workbench{grid-template-columns:224px minmax(0,1fr);gap:12px}.ingredients{padding:12px}.swatches{gap:4px;grid-template-columns:repeat(4,minmax(44px,1fr))}.charms{gap:4px}.charm-art{width:38px;height:38px}.actions{gap:4px;padding:6px}.actions button{font-size:12px}.utility-actions{gap:7px}.utility-actions button{font-size:13px;padding:9px 12px}}
@media(max-width:720px){#app{padding:9px 10px 26px}h1{font-size:28px;letter-spacing:-.9px}.app-header{margin-bottom:12px;gap:8px}.app-header p{display:none}.header-actions{gap:6px}.header-actions button{font-size:12px;padding:8px;gap:4px}#gallery-count{font-size:11px;min-width:18px}.workbench{display:flex;flex-direction:column;height:auto;gap:10px}.ingredients{padding:0;border:none;background:none;border-radius:15px;box-shadow:none;flex-shrink:0}.ingredient-tabs{padding:3px}.ingredient-tabs button{font-size:14px}.ingredient-body{display:none;position:absolute;top:51px;left:0;right:0;z-index:10;background:#fcfaff;box-shadow:0 12px 30px #392b5040;border:1px solid var(--line);border-radius:18px;padding:16px;max-height:min(430px,70svh)}.ingredients.open .ingredient-body{display:block}.panel-top #drawer-close{display:flex;min-height:44px;font-size:12px;padding:6px 12px}.ingredient-body p{margin:7px 0 14px}.swatches{grid-template-columns:repeat(6,1fr);gap:10px}.charms{grid-template-columns:repeat(4,1fr)}.swatch{max-height:60px}.charm-button{aspect-ratio:auto}.ingredient-bottom{margin-top:18px;flex-direction:row;align-items:center}.ingredient-bottom button{width:auto}.ingredient-bottom label{font-size:13px}.slime-workspace{gap:7px}#stage{height:clamp(175px,calc(100svh - 432px - var(--nav-overflow,0px)),530px);flex:none;border-radius:24px}.creation-name{top:13px;left:17px;font-size:12px}.actions{grid-template-columns:repeat(4,1fr);gap:5px;padding:7px;border-radius:17px}.actions button{flex-direction:row;min-height:44px;gap:4px;padding:8px 2px;font-size:11px;letter-spacing:-.25px}.actions button:last-child{grid-column:3/5}.actions svg{width:17px;height:17px;flex-shrink:0}.gesture-hint{font-size:11px;line-height:1.4;min-height:16px}.bench-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.utility-actions{display:contents}.utility-actions button{font-size:12px;padding:7px 4px;gap:4px}#play-mode{grid-row:1;grid-column:1}#new-slime{grid-row:1;grid-column:2}#reset-shape{grid-row:1;grid-column:3}#undo{grid-row:2;grid-column:1}.bench-footer .primary{grid-row:2;grid-column:2/4;min-width:0;min-height:44px}#notice{font-size:12px;margin-top:6px;min-height:18px}.guide{margin-top:35px;padding:24px 5px}.guide-columns{grid-template-columns:1fr;gap:15px}.guide h2{font-size:24px}.guide p{font-size:14px}.guide h3{font-size:18px}dialog{padding:20px;border-radius:22px}.name-row{flex-direction:column}.name-row button{align-self:flex-start}#gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.slime-card h3{font-size:15px;padding:10px 10px 0}.slime-card p{padding:4px 10px 9px}.slime-card .card-actions{padding:0 8px 9px;gap:4px}.gallery-footer button,.import-label{font-size:12px;padding:8px 10px}.dialog-heading h2{font-size:24px}.dialog-heading p{font-size:12px}body.playing .workbench{height:auto}body.playing #stage{height:clamp(230px,calc(100svh - 313px - var(--nav-overflow,0px)),650px)}body.playing .app-header{margin-bottom:13px}}
@media(max-width:720px) and (max-height:740px){#stage{height:calc(100svh - 420px - var(--nav-overflow,0px));min-height:175px}.app-header{margin-bottom:8px}.workbench{gap:7px}.bench-footer{margin-top:7px}.actions{padding:5px}#notice{min-height:16px}}
@media(max-height:520px) and (min-width:721px){.workbench{height:450px}.guide{margin-top:40px}}
@media(prefers-reduced-motion:reduce){button{transition:none}dialog::backdrop{backdrop-filter:none}}