@font-face {
    font-family: "DM Sans Variable";
    src: url("fonts/dm-sans-latin-variable.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}

:root {
    color-scheme: dark;
    font-family: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #08110c; }

.alder-demo { width: 100%; height: 100%; padding: clamp(8px, 2.4vw, 14px); }
.alder-stage {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(84, 96, 37, 0.18);
    border-radius: clamp(14px, 3.5vw, 24px);
    background:
        radial-gradient(circle at 12% 18%, rgba(120, 133, 48, 0.2), transparent 44%),
        radial-gradient(circle at 90% 82%, rgba(47, 86, 70, 0.2), transparent 46%),
        #08110c;
    padding: clamp(10px, 3vw, 18px) clamp(9px, 2.5vw, 15px) 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.alder-stage::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(125deg, transparent 8%, rgba(174, 188, 106, 0.055) 28%, transparent 46%),
        radial-gradient(rgba(248, 247, 239, 0.11) 0.5px, transparent 0.5px);
    background-size: auto, 18px 18px;
    content: "";
    opacity: 0.46;
}

.app-window {
    position: relative;
    z-index: 1;
    width: min(100%, 530px);
    height: 68%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: clamp(8px, 2vw, 14px);
    box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-window.is-light { border-color: rgba(43, 53, 27, 0.18); background: #fffefa; color: #172013; }
.app-window.is-dark { background: #171918; color: rgba(255, 255, 255, 0.9); }
.window-bar {
    display: grid;
    height: 15%;
    min-height: 27px;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    border-bottom: 1px solid rgba(43, 53, 27, 0.1);
    background: rgba(248, 247, 243, 0.94);
    padding: 0 clamp(8px, 2vw, 13px);
}

.is-dark .window-bar { border-color: rgba(255, 255, 255, 0.08); background: #101211; }
.traffic { display: flex; gap: clamp(3px, 0.8vw, 5px); }
.traffic i { width: clamp(5px, 1.4vw, 8px); aspect-ratio: 1; border-radius: 50%; }
.traffic i:first-child { background: #d95f57; }
.traffic i:nth-child(2) { background: #dcae47; }
.traffic i:last-child { background: #70a26b; }
.window-app { display: inline-flex; align-items: center; justify-self: center; gap: 5px; color: rgba(23, 32, 19, 0.64); font-size: clamp(8px, 1.7vw, 11px); }
.window-app i { font-size: 1.25em; font-style: normal; line-height: 1; }
.window-app b { font-weight: 650; }
.is-dark .window-app { color: rgba(255, 255, 255, 0.72); }
.window-language { justify-self: end; color: rgba(23, 32, 19, 0.36); font-size: clamp(7px, 1.35vw, 9px); font-weight: 590; }
.is-dark .window-language { color: rgba(255, 255, 255, 0.34); }
.window-body { height: 85%; }

.journal-scene { height: 100%; padding: clamp(10px, 3vw, 20px) clamp(14px, 4vw, 28px); }
.journal-meta { display: flex; justify-content: center; gap: 6px; color: rgba(23, 32, 19, 0.3); font-size: clamp(7px, 1.25vw, 9px); }
.journal-meta span + span::before { margin-right: 6px; content: "·"; }
.journal-scene h1 { margin: clamp(11px, 3vw, 22px) 0 0; color: rgba(23, 32, 19, 0.86); font-size: clamp(15px, 3.25vw, 23px); font-weight: 650; letter-spacing: -0.025em; }
.journal-scene p { max-width: 92%; margin: clamp(7px, 1.7vw, 12px) 0 0; color: rgba(23, 32, 19, 0.82); font-size: clamp(10px, 2.45vw, 17px); font-weight: 485; line-height: 1.5; letter-spacing: -0.015em; }

.scene-grid { display: grid; height: 100%; grid-template-columns: 30% minmax(0, 1fr); }
.scene-sidebar { border-right: 1px solid rgba(255, 255, 255, 0.07); background: #111312; padding: 10px 7px; }
.scene-sidebar > b { display: block; margin: 0 4px 8px; color: rgba(255, 255, 255, 0.43); font-size: clamp(7px, 1.3vw, 9px); }
.scene-sidebar span { display: block; overflow: hidden; border-radius: 5px; padding: 6px 5px; color: rgba(255, 255, 255, 0.48); font-size: clamp(6px, 1.2vw, 8px); text-overflow: ellipsis; white-space: nowrap; }
.scene-sidebar span.is-active { background: rgba(120, 133, 48, 0.25); color: white; }
.list-scene { padding: 11px 12px; }
.list-scene header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; }
.list-scene small { color: #9bac50; font-size: clamp(6px, 1.1vw, 8px); font-weight: 680; }
.list-scene h1 { margin: 2px 0 0; font-size: clamp(15px, 3.4vw, 24px); }
.list-copy { margin: 10px 0 0; color: rgba(255, 255, 255, 0.86); font-size: clamp(9px, 2vw, 14px); line-height: 2; white-space: pre-line; }

.message-thread { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 9px 10px; }
.message-thread header { display: flex; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 7px; font-size: clamp(7px, 1.4vw, 10px); }
.message-bubbles { display: flex; flex: 1; align-items: flex-start; flex-direction: column; gap: 5px; padding: 9px 0; }
.message-bubbles p { max-width: 76%; margin: 0; border-radius: 8px 8px 8px 3px; background: rgba(255, 255, 255, 0.1); padding: 6px 8px; color: rgba(255, 255, 255, 0.78); font-size: clamp(7px, 1.4vw, 10px); }
.message-bubbles p:last-child { align-self: flex-end; border-radius: 8px 8px 3px 8px; background: #4285f4; color: white; }
.message-composer { display: flex; min-height: 31px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 5px 9px; color: rgba(255, 255, 255, 0.9); font-size: clamp(7px, 1.45vw, 10px); line-height: 1.35; }

.mail-scene { height: 100%; padding: 9px 15px; }
.mail-fields { border-bottom: 1px solid rgba(43, 53, 27, 0.1); }
.mail-fields p { display: flex; min-height: 23px; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid rgba(43, 53, 27, 0.07); font-size: clamp(7px, 1.35vw, 10px); }
.mail-fields p:last-child { border: 0; }
.mail-fields span { width: 42px; color: rgba(23, 32, 19, 0.4); }
.mail-copy { margin-top: 13px; color: rgba(23, 32, 19, 0.84); font-size: clamp(10px, 2.2vw, 15px); line-height: 1.5; }

.note-scene { display: grid; height: 100%; grid-template-columns: 27% minmax(0, 1fr); background: #fbfaf5; }
.note-scene aside { border-right: 1px solid rgba(43, 53, 27, 0.09); background: #f2f0e8; padding: 12px 9px; }
.note-scene aside span { color: rgba(23, 32, 19, 0.36); font-size: clamp(6px, 1.1vw, 8px); font-weight: 650; text-transform: uppercase; }
.note-scene aside b { display: block; margin-top: 11px; border-radius: 6px; background: rgba(181, 157, 56, 0.16); padding: 7px; color: rgba(23, 32, 19, 0.76); font-size: clamp(7px, 1.35vw, 10px); }
.note-scene article { padding: 13px 16px; }
.note-scene article small { color: #8a7b30; font-size: clamp(6px, 1.1vw, 8px); font-weight: 680; }
.note-scene h1 { margin: 3px 0 0; color: rgba(23, 32, 19, 0.9); font-size: clamp(14px, 3vw, 21px); }
.note-copy { margin-top: 12px; color: rgba(23, 32, 19, 0.82); font-size: clamp(9px, 2vw, 14px); line-height: 1.5; }

.text-cursor { display: inline-block; width: 1px; height: 0.98em; margin-left: 0.12em; background: #7f9140; vertical-align: -0.08em; animation: cursor 1s steps(2, end) infinite; }
.is-dark .text-cursor { background: #aaba58; }
.alder-capsule {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(70%, 340px);
    min-width: 250px;
    height: clamp(44px, 15%, 58px);
    align-items: center;
    gap: clamp(3px, 1vw, 7px);
    margin-top: clamp(7px, 2.3vw, 14px);
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: clamp(12px, 3vw, 18px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 42%), #090c0b;
    padding: 0 5px 0 7px;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.capsule-grip { display: grid; width: 12px; grid-template-columns: repeat(2, 2px); gap: 3px; place-content: center; }
.capsule-grip i { width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); }
.capsule-display { display: flex; min-width: 0; flex: 1; justify-content: center; flex-direction: column; }
.capsule-display strong { font-size: clamp(7px, 1.45vw, 10px); font-weight: 650; }
.capsule-display small { overflow: hidden; margin-top: 1px; color: rgba(255, 255, 255, 0.38); font-size: clamp(5px, 1.05vw, 7px); text-overflow: ellipsis; white-space: nowrap; }
.capsule-wave { display: none; height: 24px; align-items: center; gap: 2px; }
.capsule-wave i { width: 2px; height: var(--h); border-radius: 2px; background: rgba(248, 247, 239, 0.86); animation: wave 0.78s ease-in-out calc(var(--h) * -18ms) infinite alternate; }
[data-phase="listening"] .capsule-wave { display: flex; }
[data-phase="listening"] .capsule-display strong { display: none; }
.capsule-action { display: grid; width: clamp(25px, 6vw, 33px); aspect-ratio: 1; flex: none; place-items: center; border-radius: 8px; color: rgba(255, 255, 255, 0.4); }
.capsule-action.is-on { color: #aebb5a; }
.capsule-action svg { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.capsule-transport { position: relative; display: grid; width: clamp(31px, 7.2vw, 40px); aspect-ratio: 1; flex: none; place-items: center; border: 1px solid white; border-radius: 50%; background: white; }
.capsule-transport i { width: 28%; height: 28%; border-radius: 50%; background: #111512; }
[data-phase="listening"] .capsule-transport i { border-radius: 3px; }
[data-phase="typing"] .capsule-transport { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); }
[data-phase="typing"] .capsule-transport i { width: 44%; height: 44%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: white; border-radius: 50%; background: transparent; animation: spin 0.8s linear infinite; }
.scene-progress { position: relative; z-index: 1; display: flex; gap: 5px; margin-top: auto; padding-top: 5px; }
.scene-progress i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); transition: width 0.25s ease, background 0.25s ease; }
.scene-progress i.is-active { width: 18px; background: #aebb5a; }

@keyframes wave { from { transform: scaleY(0.28); opacity: 0.45; } to { transform: scaleY(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cursor { 50% { opacity: 0; } }

@media (max-width: 360px) {
    .alder-capsule { width: 92%; min-width: 0; }
    .capsule-display small { display: none; }
    .journal-scene p { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}