:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff;color:#111;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}#app{position:fixed;inset:0}body{min-width:320px;background:#fff;transition:background-color .18s ease}body.is-dark-mode{background:#020202}#app canvas{background:#fff;cursor:grab;transition:background-color .18s ease}body.is-dark-mode #app canvas{background:#020202}#app canvas:active{cursor:grabbing}.hud{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;pointer-events:none}button{-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 10px 30px #0000000f}@keyframes cherry-toast-pop{0%{transform:scale(.72) rotate(-8deg)}62%{transform:scale(1.12) rotate(4deg)}to{transform:scale(1) rotate(0)}}.hud a,button{display:inline-flex;align-items:center;text-decoration:none;min-height:40px;padding:0 14px;border:1px solid rgb(0 0 0 / .12);border-radius:8px;background:#ffffffb8;color:#111;font:600 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;pointer-events:auto}.material-lab,.shadow-controls{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));width:min(310px,calc(100vw - 28px));padding:12px;border:1px solid rgb(0 0 0 / .13);border-radius:8px;background:#ffffffc7;box-shadow:0 18px 46px #00000014;-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);color:#111;pointer-events:auto}.material-lab{max-height:calc(100vh - 28px);overflow-y:auto}.material-lab__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:700 12px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:uppercase}.material-lab__header:not(:first-child){margin-top:16px}.material-lab__reset{padding:3px 8px;border:1px solid rgb(0 0 0 / .18);border-radius:5px;background:#ffffffb3;color:#111;font:600 10px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.material-lab__reset:hover{background:#fff}.material-lab__replay{display:block;width:100%;margin-top:14px;padding:8px 10px}.material-lab__row{display:grid;grid-template-columns:minmax(86px,1fr) 48px;gap:6px 10px;align-items:center;padding:7px 0;border-top:1px solid rgb(0 0 0 / .07);font:600 12px/1.1 ui-sans-serif,system-ui,sans-serif}.material-lab__row output{justify-self:end;color:#111111a8;font-variant-numeric:tabular-nums}.material-lab__row input{grid-column:1 / -1;width:100%;accent-color:#111}.shadow-controls{top:auto;left:auto;right:max(16px,env(safe-area-inset-right));bottom:max(64px,calc(env(safe-area-inset-bottom) + 64px))}.shadow-controls__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:700 12px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-transform:uppercase}.shadow-controls__row{display:grid;grid-template-columns:minmax(104px,1fr) 52px;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid rgb(0 0 0 / .07);font:600 12px/1.1 ui-sans-serif,system-ui,sans-serif}.shadow-controls__row output{justify-self:end;color:#111111a8;font-variant-numeric:tabular-nums}.shadow-controls__row input{grid-column:1 / -1;width:100%;accent-color:#111}.hud a:active,button:active{transform:translateY(1px)}button[hidden]{display:none}body.is-dark-mode .shadow-controls{border-color:#ffffff2e;background:#080808b8;color:#f4f4f4;box-shadow:0 18px 54px #0000006b}body.is-dark-mode .shadow-controls__row{border-top-color:#ffffff1c}body.is-dark-mode .shadow-controls__row output{color:#f4f4f4ad}body.is-dark-mode .shadow-controls__row input{accent-color:#f4f4f4}body.is-dark-mode .hud a,body.is-dark-mode button{border-color:#ffffff2e;background:#080808b8;color:#f4f4f4;box-shadow:0 12px 34px #00000052}body.is-dark-mode button[aria-pressed=true]{border-color:#ffffff57;background:#ffffff24}@media(hover:hover)and (pointer:fine){.hud a:hover,button:hover{background:#ffffffe0;border-color:#0003}body.is-dark-mode .hud a:hover,body.is-dark-mode button:hover{background:#ffffff29;border-color:#ffffff52}}@media(max-width:520px){.hud{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));justify-content:space-between;flex-wrap:wrap}button{min-width:0;flex:0 1 auto}.shadow-controls{right:max(12px,env(safe-area-inset-right));bottom:max(104px,calc(env(safe-area-inset-bottom) + 104px))}.material-lab,.shadow-controls{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:min(280px,calc(100vw - 20px));padding:10px}.shadow-controls{top:auto;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(104px,calc(env(safe-area-inset-bottom) + 104px));width:auto}}.intro-hint{position:fixed;left:50%;top:50%;padding-left:.34em;transform:translate(-50%,-50%) translateY(6px);font:600 11px/1 ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.34em;text-transform:uppercase;color:#0000008c;opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none;-webkit-user-select:none;user-select:none}.intro-hint.is-visible{opacity:1;transform:translate(-50%,-50%);animation:intro-hint-breathe 2.6s ease-in-out .5s infinite}body.is-dark-mode .intro-hint{color:#fff7f899;text-shadow:0 0 18px rgb(255 0 42 / .35)}@keyframes intro-hint-breathe{0%,to{opacity:1}50%{opacity:.45}}