:root{color-scheme:dark;--bg:#091311;--ink:#edf5ef;--muted:#9aac9f;--line:#ffffff17;--mint:#b8f5cc;--blue:#b6dafa;--amber:#f3d3a4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 85% 0,#264c3a55,transparent 50%),var(--bg);color:var(--ink);font-family:"Avenir Next","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.page{position:relative;width:calc(100% - 112px);max-width:1280px;margin:auto}a{color:inherit;text-decoration:none}a:hover{color:var(--mint)}nav{min-height:90px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:.13em;font-weight:700}.brand-icon{display:grid;place-items:center;width:39px;height:39px;border:1px solid #a8c6b846;border-radius:12px;font-size:28px;letter-spacing:-.06em;font-weight:500;padding-bottom:6px}.brand-sub{display:block;margin-top:5px;font-size:10px;letter-spacing:0;color:var(--muted);font-weight:400}.back{font-size:12px;display:flex;align-items:center;gap:20px;color:#b2c3ba}.back span{font-size:22px}.hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:42px 0 35px}.eyebrow{font-size:10px;letter-spacing:.17em;color:var(--mint);font-weight:500;display:flex;gap:12px;align-items:center;margin:0 0 20px}.eyebrow:before{content:"";height:1px;width:24px;background:var(--mint)}h1{font-size:clamp(48px,5.7vw,80px);font-weight:500;letter-spacing:-.065em;line-height:1.06;margin:0}h1 em{color:var(--mint);font-style:normal}.intro{font-size:13px;color:#a9bbb1;line-height:1.85;margin:20px 0 0}.hero-note{align-self:flex-end;text-align:right;color:#9ab19f;font-size:10px;letter-spacing:.1em;line-height:1.8;padding-bottom:5px}.hero-note strong{display:block;font-size:56px;font-weight:300;color:#c3dfcb;letter-spacing:-.05em;line-height:1.2}.section-heading{display:flex;align-items:center;gap:14px}.section-number{font:10px monospace;color:#789582}h2{font-size:18px;font-weight:500;letter-spacing:-.03em;margin:0}.panel{padding:26px;border:1px solid #b8f5cc24;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#23423588,transparent 70%),linear-gradient(150deg,#15221b,#0e1b17);min-width:0}.blue-panel{border-color:#b6dafa24;background:radial-gradient(ellipse at 100% 0,#203848aa,transparent 70%),linear-gradient(150deg,#16232a,#101d23)}button,select{font:inherit;font-size:12px;border-radius:30px;padding:13px 19px}button{background:var(--mint);border:1px solid var(--mint);color:#14251b;font-weight:600;cursor:pointer;transition:transform .2s,background .2s;min-height:43px}button:hover{background:#d2ffdf;transform:translateY(-2px)}button.secondary{background:#c0f4d107;border:1px solid #94c0a740;color:#deeee3}button.secondary:hover{background:#c0f4d119}button:disabled{opacity:.5;cursor:wait;transform:none}select{background:#0c1a14;color:var(--ink);border:1px solid #94c0a740;min-height:43px;cursor:pointer}label{font-size:11px;color:#a9beb1}:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.hint{font-size:11px;line-height:1.7;color:#8da697}.divider{height:1px;background:var(--line);margin:25px 0}.about{display:flex;justify-content:space-between;gap:25px;margin:30px 0;color:#91aa9a;font-size:11px;line-height:1.8}.about strong{font-weight:500;color:#c2d6c8}footer{border-top:1px solid var(--line);padding:24px 0 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;color:#809588;font-size:10px}footer a{color:#bed0c2}.sibling-links{display:flex;gap:22px}.noscript{padding:16px;color:var(--amber);border:1px solid #f3d3a444;border-radius:10px}details summary{cursor:pointer;list-style:none}details summary::-webkit-details-marker{display:none}.details-label{display:flex;justify-content:space-between;align-items:center}.details-label:after{content:"+";font-size:23px;color:var(--amber)}details[open] .details-label:after{content:"−"}@media(max-width:1000px){.page{width:calc(100% - 64px)}}@media(max-width:760px){.page{width:calc(100% - 40px)}nav{min-height:87px}.brand{font-size:9px;gap:10px}.brand-sub{font-size:9px}.back{font-size:0}.back span{font-size:23px}.hero{padding:34px 0 30px}.eyebrow{font-size:8px;letter-spacing:.12em;margin-bottom:20px}h1{font-size:clamp(43px,9vw,65px)}.intro{font-size:12px}.hero-note{display:none}.panel{padding:23px}.about{flex-direction:column;gap:12px}footer{font-size:10px;align-items:flex-start}.sibling-links{flex-wrap:wrap;gap:15px}button,select{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
        .hourglass {
            position: relative;
            width: 220px;
            height: 380px;
            cursor: pointer;
            transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1);
        }

        .hourglass.flipping {
            transform: rotate(180deg);
        }

        .frame-top,
        .frame-bottom {
            position: absolute;
            left: 20px;
            width: 180px;
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(180deg, #8c552b, var(--wood));
            box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
        }

        .frame-top { top: 0; }
        .frame-bottom { bottom: 0; }

        .pillar {
            position: absolute;
            top: 18px;
            bottom: 18px;
            width: 16px;
            border-radius: 999px;
            background: linear-gradient(180deg, #8c552b, var(--wood));
        }

        .pillar.left { left: 30px; }
        .pillar.right { right: 30px; }

        .glass {
            position: absolute;
            left: 48px;
            top: 18px;
            width: 124px;
            height: 344px;
        }

        .bulb {
            position: absolute;
            left: 0;
            width: 124px;
            height: 160px;
            border: 4px solid rgba(113, 73, 38, 0.6);
            background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.1));
            overflow: hidden;
        }

        .bulb.top {
            top: 0;
            border-radius: 0 0 62px 62px;
            clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
        }

        .bulb.bottom {
            bottom: 0;
            border-radius: 62px 62px 0 0;
            clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
        }

        .sand-top,
        .sand-bottom {
            position: absolute;
            left: 0;
            width: 100%;
            background: linear-gradient(180deg, #efb154, var(--sand));
            transition: height 1s linear, transform 1s linear;
        }

        .sand-top {
            bottom: 0;
            clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
        }

        .sand-bottom {
            bottom: 0;
            clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
        }

        .stream {
            position: absolute;
            left: 59px;
            top: 152px;
            width: 6px;
            height: 42px;
            border-radius: 999px;
            background: linear-gradient(180deg, #f5c26d, #c97820);
            opacity: 0;
        }

        .hourglass.running .stream {
            opacity: 1;
            animation: streamPulse 0.22s linear infinite;
        }


.layout{display:grid;grid-template-columns:1.05fr 1fr;gap:18px}.stage-panel{position:relative;overflow:hidden}.stage{position:relative;display:grid;place-items:center;min-height:418px;padding:20px}.hourglass{width:220px;height:340px;filter:drop-shadow(0 18px 25px #0006);z-index:1}.frame-top,.frame-bottom{height:14px;left:18px;width:184px;background:linear-gradient(180deg,#ccebd3,#82a992 42%,#385d47);box-shadow:inset 0 1px 2px #ffffff66,0 4px 12px #0004}.pillar{top:12px;bottom:12px;width:8px;background:linear-gradient(90deg,#365d48,#a5cbb1,#315840);opacity:.8}.pillar.left{left:26px}.pillar.right{right:26px}.glass{left:48px;top:14px;width:124px;height:312px}.bulb{height:147px;border:2px solid #c7f8d96b;background:linear-gradient(115deg,#d7ffeb33,#8ec8a909 35%,#d1ffdf12 73%,#bcebd92e);box-shadow:inset 0 0 22px #cdffdf09}.sand-top,.sand-bottom{background:linear-gradient(180deg,#f5dfaf,#c7a15f);box-shadow:0 0 18px #e8c38033}.stream{left:60px;top:141px;width:4px;height:30px;background:linear-gradient(180deg,#f5dfaf,#c7a15f);box-shadow:0 0 12px #f3d3a44d}.stage-orbit{position:absolute;width:310px;height:310px;max-width:100%;border:1px solid #b8f5cc14;border-radius:50%;box-shadow:0 0 0 27px #b8f5cc03,0 0 0 54px #b8f5cc02;transform:scaleY(.6) rotate(-28deg)}.stage-caption{display:flex;align-items:center;justify-content:center;gap:9px;color:#91ad9b;font-size:11px;line-height:1.7;margin:0;text-align:center}.stage-caption span{font-size:20px;color:var(--mint)}.timer-panel{border-color:#f3d3a424;background:radial-gradient(ellipse at 100% 0,#443a2999,transparent 70%),linear-gradient(150deg,#27291f,#172018);padding:30px}.timer-label{font-size:10px;letter-spacing:.15em;color:#b8b99e;margin:38px 0 12px}.time{font-size:clamp(75px,8vw,116px);font-weight:400;line-height:1;letter-spacing:-.065em;color:var(--amber);font-variant-numeric:tabular-nums}#status-text{font-size:12px;color:#b8c5ae;min-height:22px;line-height:1.7;margin:17px 0 0}.done{color:var(--mint);font-weight:500}.duration{display:flex;justify-content:space-between;align-items:center;gap:15px}.duration select{min-width:145px;border-color:#f3d3a433;background:#172018}.controls{display:flex;gap:10px;margin-top:22px}.controls #start-button{flex:1;background:var(--amber);border-color:var(--amber);color:#2a291d}.controls #start-button:hover{background:#ffe7c4}.controls #stop-button{border-color:#f3d3a433}.sound-note{display:flex;gap:12px;margin-top:27px;padding-top:22px;border-top:1px solid #f3d3a417}.sound-icon{font-size:21px;color:var(--amber)}.sound-note p{font-size:11px;line-height:1.8;color:#8fa28e;margin:0}.sound-note strong{font-weight:400;color:#c6ccba}@keyframes streamPulse{0%,100%{opacity:.75}50%{opacity:1}}@media(max-width:1000px){.layout{grid-template-columns:1fr 1fr}.timer-panel{padding:25px}.time{font-size:80px}.controls{flex-wrap:wrap}.controls #start-button{min-width:100%}.controls #stop-button{width:100%}.stage{min-height:460px}}@media(max-width:760px){.layout{grid-template-columns:1fr}.timer-panel{order:-1;padding:25px}.timer-label{margin-top:28px}.time{font-size:86px}.controls{flex-wrap:nowrap}.controls #start-button{min-width:0}.controls #stop-button{width:auto}.controls button{font-size:11px;padding:12px 14px}.stage{min-height:380px;padding:15px}.sound-note{margin-top:24px}.stage-caption{font-size:10px}.stage-orbit{width:260px;height:260px}.duration select{min-width:135px}.timer-panel .divider{margin:21px 0}}