:root{--bg:#fcf9f4;--surface:#fff;--surface-2:#f0ede9;--text:#3d3d3d;--muted:#8a857d;--soft:#a0a0a0;--gold:#c8a24a;--sage:#7fb7a6;--accent:#c8a24a;--accent-soft:#e2c77a;--border:#dcd8d0;--shadow:0 2px 8px #00000008}body{color:var(--text);background:var(--bg);min-height:100vh;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.6}body:before{content:"";z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0;-webkit-mask-image:linear-gradient(#0000 30%,#0000001a);mask-image:linear-gradient(#0000 30%,#0000001a)}@keyframes pulse-slow{0%,to{opacity:.3}50%{opacity:.45}}.animate-pulse-slow{animation:8s ease-in-out infinite pulse-slow}.text-stable{color:var(--accent);font-weight:500}.text-neutral{color:var(--text)}.text-muted{color:var(--muted)}.text-over{color:var(--soft)}.app-shell{justify-content:center;min-height:100vh;display:flex}.app-container{width:100%;max-width:560px;padding:28px 18px 110px}h1{color:#2d2d2d;letter-spacing:-.2px;margin-bottom:10px;font-size:22px;font-weight:600}h2{color:#2d2d2d;letter-spacing:-.01em;margin:18px 0 10px;font-size:16px;font-weight:600;position:relative}h2:before{content:"";background:var(--sage);border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}p{color:var(--muted);margin:6px 0;font-size:14px}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;margin-bottom:12px;padding:16px}.card h2{margin-top:0}.nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);background:#f7f3edcc;justify-content:space-between;align-items:center;padding:12px 20px;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-links{gap:10px;display:flex}.nav a{color:var(--muted);border-radius:8px;align-items:center;gap:8px;padding:8px;font-size:13px;text-decoration:none;display:flex}.nav a:hover{background:var(--surface-2);color:var(--text)}button{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);cursor:pointer;border-radius:12px;padding:12px;font-size:14px;transition:all .2s}button:hover{background:var(--surface-2)}button.active{background:var(--surface-2);border-color:var(--sage);color:var(--text);font-weight:500;box-shadow:inset 0 2px 4px #0000000a}button.primary{background:var(--surface);border:1px solid var(--sage);color:var(--sage);font-weight:500}button.primary:hover{background:var(--sage);color:#fff;border-color:var(--sage)}.stat-row{gap:10px;display:flex}.stat{background:var(--surface);border:1px solid var(--border);text-align:center;box-shadow:var(--shadow);border-radius:14px;flex:1;padding:12px}.stat b{color:var(--text);font-size:18px;display:block}input{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:12px;font-size:14px}input[type=range]{width:100%;max-width:100%;accent-color:var(--sage);box-sizing:border-box;display:block}button:focus{outline:none}