:root{--gold: #eac94e;--gold-deep: #dfbc3c;--cream: #f5efdd;--sand: #9c9583;--ink: #14120a;--ink-soft: #2c2a22;--panel: #1c1a12;--whatsapp: #25d366;--font-display: "Fraunces", Georgia, serif;--font-sans: "Work Sans", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{background:var(--ink);color:var(--cream);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em}a{color:var(--gold)}:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}img{max-width:100%;display:block}.mono{font-family:var(--font-mono);letter-spacing:.02em}.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}.figure{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.pill{display:inline-flex;align-items:center;gap:.5ch;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease;text-decoration:none}.pill:hover,.pill--solid{background:var(--gold);color:var(--ink)}.pill--solid:hover{background:var(--gold-deep)}.mode-toggle{position:fixed;top:max(1rem,env(safe-area-inset-top));right:1rem;z-index:50;display:inline-flex;align-items:center;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--gold);background:#14120ad1;backdrop-filter:blur(8px);color:var(--gold);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease}.mode-toggle:hover{background:var(--gold);color:var(--ink)}.konsep-toggle,.scene-toggle{position:fixed;right:1rem;z-index:49;display:inline-flex;align-items:center;gap:.5ch;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--sand);background:#14120ad1;backdrop-filter:blur(8px);color:var(--cream);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,color .18s ease}.konsep-toggle{top:calc(max(1rem,env(safe-area-inset-top)) + 3.1rem)}.scene-toggle{top:calc(max(1rem,env(safe-area-inset-top)) + 6rem)}.konsep-toggle:hover,.scene-toggle:hover{border-color:var(--gold);color:var(--gold)}body.presenting .konsep-toggle,body.presenting .scene-toggle{opacity:0;pointer-events:none}.mode-fade{animation:modeFade .35s ease both}@keyframes modeFade{0%{opacity:0}to{opacity:1}}.scroll-rail{position:fixed;right:.55rem;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:.55rem;padding:.5rem .35rem}.scroll-rail__dot{position:relative;width:10px;height:10px;padding:0;border:1px solid var(--sand);border-radius:999px;background:transparent;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.scroll-rail__dot:hover{border-color:var(--gold);transform:scale(1.25)}.scroll-rail__dot.is-passed{background:var(--sand)}.scroll-rail__dot.is-active{background:var(--gold);border-color:var(--gold);transform:scale(1.5)}.scroll-rail__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.scroll-rail__tip{position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:.25rem .55rem;border-radius:6px;background:#14120aeb;border:1px solid rgba(255,255,255,.12);color:var(--cream);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .15s ease}.scroll-rail__dot:hover .scroll-rail__tip,.scroll-rail__dot:focus-visible .scroll-rail__tip{opacity:1}@media (max-width: 640px),(max-height: 520px){.scroll-rail{gap:.4rem}.scroll-rail__dot{width:8px;height:8px}.scroll-rail__tip{display:none}.mode-toggle{padding:.5rem .85rem;font-size:.7rem;right:.6rem}.konsep-toggle,.scene-toggle{padding:.4rem .7rem;font-size:.64rem;right:.6rem}.konsep-toggle{top:calc(max(.6rem,env(safe-area-inset-top)) + 2.7rem)}.scene-toggle{top:calc(max(.6rem,env(safe-area-inset-top)) + 5.1rem)}.present-start{display:none}.sound-toggle{left:.6rem}}.sound-toggle,.present-start{position:fixed;z-index:46;bottom:max(1rem,env(safe-area-inset-bottom));border:1px solid var(--sand);border-radius:999px;background:#14120ad1;backdrop-filter:blur(8px);color:var(--cream);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;cursor:pointer;transition:border-color .18s ease,color .18s ease}.sound-toggle{left:1rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;font-size:.95rem}.present-start{left:4rem;padding:.55rem .95rem;text-transform:uppercase}.sound-toggle:hover,.present-start:hover{border-color:var(--gold);color:var(--gold)}.present-hint{position:fixed;z-index:60;left:50%;bottom:1.2rem;transform:translate(-50%);padding:.5rem 1rem;border-radius:999px;background:#14120ae6;border:1px solid rgba(255,255,255,.12);color:var(--sand);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.present-hint button{background:none;border:none;color:var(--gold);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}body.presenting .mode-toggle,body.presenting .present-start,body.presenting .sound-toggle,body.presenting .scroll-rail{opacity:0;pointer-events:none}.share-btn{display:inline-flex;align-items:center;gap:.5ch;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--sand);background:transparent;color:var(--cream);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,color .18s ease}.share-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.share-btn:disabled{opacity:.6;cursor:default}.hero-skip{margin-top:1.1rem;background:none;border:none;color:var(--sand);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;pointer-events:auto}.hero-skip:hover{color:var(--gold)}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}