/* Themes apply to visible material surfaces, including the closed resident mark. */
[data-theme=glass]{--surface:linear-gradient(130deg,#ffffffb8,#e1f3ff74 45%,#f1ffed8c);--soft:#ffffff8c;--text:#213c50;--secondary:#4d6a7c;--edge:#fffffff2;--separator:#37597525;--indicator:#187b58;--glow:#41bb9570;--blur:22px;--panel-shadow:0 18px 35px #133b5929,inset 0 2px 2px #ffffffef,inset 0 -1px 2px #c9e9fff0}
[data-theme=black]{--surface:#181b20;--soft:#ffffff14;--text:#f4f6fa;--secondary:#b0bbc7;--edge:#ffffff32;--separator:#ffffff1c;--indicator:#87e3b9;--glow:#7be2b350;--blur:0px;--panel-shadow:0 18px 38px #09162145,inset 0 1px 1px #ffffff22}
[data-theme=codex]{--surface:#f4f1e8;--soft:#e5e1d6;--text:#35342f;--secondary:#716c60;--edge:#fffdf6;--separator:#706c572b;--indicator:#6b7452;--glow:#b3bb7760;--blur:0px;--panel-shadow:0 18px 35px #38401d28,inset 0 2px 1px #fff}
.material{background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:21px;box-shadow:var(--panel-shadow);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);transition:background .25s,color .25s,box-shadow .25s}
.demo-scene{height:338px;position:relative;isolation:isolate;overflow:hidden;margin:10px 10px 0;border-radius:19px;background-image:linear-gradient(130deg,#f2f8ff5c,#eaf9e62e),url('assets/liquid-pastel.jpg');background-size:cover;background-position:center 20%;color:var(--text)}
.hills{background-position:60% 78%}
.meadow{background-position:20% 95%}
.resident-sky{background-position:72% 42%}
.scene-menubar{position:absolute;top:0;left:0;right:0;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 13px;background:#fff4;font-size:8px;color:#344b58}
.notch-camera{position:absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:118px;border-radius:0 0 11px 11px;background:#181b20;z-index:2}
.notch-camera:after{content:'';position:absolute;top:9px;right:12px;width:5px;height:5px;border-radius:50%;background:#293840;box-shadow:inset 0 0 1px #649bbc}
.mini-panel{position:relative;width:81%;max-width:370px;margin:34px auto 0;padding:21px 23px 17px;min-height:250px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:500;margin-bottom:20px}
.provider-name{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.provider-name img{object-fit:contain;border-radius:5px;background:#fff}
.tiny-label{color:var(--secondary);font-size:10px;line-height:1.6;font-weight:400}
.quota-line{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin:15px 0 8px}
.quota-line strong{font-size:12px;font-weight:500}
.meter{height:5px;background:var(--separator);border-radius:6px;overflow:hidden;margin-bottom:7px}
.meter i{display:block;width:var(--fill);height:100%;border-radius:inherit;background:var(--indicator);animation:meter-arrive .85s ease-out both}
.subtle{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--soft,#e7eef3);color:var(--text,#304b60);border:1px solid var(--separator,#d5e1e9);padding:7px 11px;border-radius:8px;font-size:10px;min-height:30px;transition:background .2s}
.subtle:hover{filter:brightness(.95)}
#usage-state-toggle{margin-top:13px;font-size:9px;padding:5px 9px;min-height:27px}
.empty-number{font-size:40px;font-weight:400;display:block;margin-top:14px}
#usage-empty{height:124px;text-align:center}
#usage-empty>p{font-size:12px}
.scene-caption{position:absolute;bottom:14px;left:12px;right:12px;text-align:center;font-size:8px;color:#294d5d}
.mini-panel h4{font-size:18px;font-weight:500;letter-spacing:-.02em;margin-top:23px}
.activity-inspection{padding:15px 0 13px;border-bottom:1px solid var(--separator)}
.activity-inspection>p{font-size:12px;margin-bottom:4px}
.activity-indicator{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--indicator);flex-shrink:0}
.activity-timeline{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--secondary);margin-top:18px;flex-wrap:wrap}
.timeline-check{color:var(--indicator)}
.timeline-line{width:16px;height:1px;background:var(--separator)}
.timeline-dot{width:4px;height:4px;border-radius:50%;background:var(--indicator)}
[data-activity-state=running] .activity-indicator{animation:working 1.6s ease-in-out infinite;box-shadow:0 0 0 3px var(--glow)}
[data-activity-state=waiting] .activity-indicator{background:#b68228;box-shadow:none;animation:none}
[data-activity-state=idle] .activity-indicator{background:#87949a;box-shadow:none;animation:none}
.scene-controls{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4px;background:#ffffffa6;border:1px solid #ffffffd4;border-radius:16px;padding:3px;backdrop-filter:blur(8px)}
.scene-controls button{font-size:9px;border-radius:12px;background:transparent;color:#3a596d;padding:4px 13px;min-height:23px}
.scene-controls button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px #203d4e20;color:#1f3d4e}
.count{font-size:10px;border-radius:6px;background:var(--soft);padding:3px 7px}
.reminder-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--separator)}
.reminder-row strong{font-size:12px;font-weight:500}
.reminder-row p{margin-top:4px}
.notice-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c39642;flex-shrink:0}
.notice-dot.soft{background:#96a88a}
.reminder-feedback{margin-top:8px;font-size:8px}
#reminder-first.is-handled{opacity:.45}
#reminder-first.is-handled strong{text-decoration:line-through}
#reminder-toggle{margin-top:4px;font-size:9px;min-height:25px;padding:4px 9px}
.resident-dock{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:4;width:132px}
.resident-trigger{position:relative;z-index:2;border-radius:0 0 14px 14px;padding:6px 24px 8px;width:132px;height:40px;display:flex;align-items:center;justify-content:center;gap:15px;border-top:0}
.resident-trigger .brand-icon{width:23px;height:23px;border-radius:6px}
.resident-trigger .activity-indicator{width:6px;height:6px}
.notch-wing{position:absolute;top:0;display:flex;align-items:center;justify-content:center;width:102px;height:32px;font-size:9px;opacity:0;transition:opacity .2s,transform .3s;border-radius:0 0 12px 12px;pointer-events:none}
.notch-wing.left{right:calc(100% - 12px);transform:translateX(25px)}
.notch-wing.right{left:calc(100% - 12px);transform:translateX(-25px)}
.resident-dock:hover .notch-wing,.resident-dock:focus-within .notch-wing{opacity:1;transform:translateX(0)}
.resident-panel{position:absolute;top:45px;left:50%;transform:translateX(-50%);width:300px;max-width:calc(100vw - 68px);padding:20px;animation:panel-arrive .22s ease-out}
.resident-panel .panel-heading{margin-bottom:10px}
.resident-panel>p{font-size:11px;margin:9px 0}
.resident-panel>strong{display:block;font-size:14px;font-weight:500;margin-top:15px}
.resident-panel>.subtle{margin-top:10px}
.resident-hint{position:absolute;top:48%;left:10px;right:10px;text-align:center;color:#36566c;transition:opacity .2s}
.resident-hint>span{font-size:22px;font-weight:400;letter-spacing:-.03em}
.resident-hint p{font-size:10px;margin-top:12px}
.resident-sky:has(.resident-trigger[aria-expanded=true]) .resident-hint{opacity:0}
.resident-dock[data-activity-state=waiting] .notch-wing.left,.resident-dock[data-activity-state=idle] .notch-wing.left{font-size:9px}
@keyframes working{0%,100%{opacity:1;box-shadow:0 0 0 2px var(--glow)}
50%{opacity:.55;box-shadow:0 0 0 5px transparent}
}
@keyframes meter-arrive{from{width:0}
to{width:var(--fill)}
}
@keyframes panel-arrive{from{opacity:0;translate:0 -5px}
to{opacity:1;translate:0 0}
}
@media(max-width:760px){.demo-scene{height:320px;margin:8px 8px 0}
.mini-panel{width:85%;padding:19px 19px 14px;min-height:235px}
.mini-panel h4{font-size:17px}
.panel-heading{margin-bottom:16px}
.activity-timeline{font-size:8px;gap:4px}
.scene-caption{font-size:7px}
.resident-hint>span{font-size:20px}
.notch-wing{width:84px;font-size:8px}
.resident-panel{width:280px}
.scene-controls{bottom:10px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
[data-activity-state=running] .activity-indicator{box-shadow:0 0 0 2px var(--glow)}
}