:root{--page-bg: #f3eee4;--page-bg-light: #fbf7ef;--panel-bg: #223746;--panel-bg-deep: #1b2e3b;--panel-border: rgba(255, 255, 255, .14);--text: #f7f1e7;--muted: #d5ccbe;--muted-strong: #bdb3a5;--accent: #f27a16;--accent-hover: #d9650f;--accent-soft: rgba(242, 122, 22, .16);--gold: #c6a24c;--input-bg: rgba(255, 255, 255, .07);--input-border: rgba(247, 241, 231, .25);--danger: #c94d4d;--danger-soft: rgba(201, 77, 77, .15);--success: #82d39c;--success-soft: rgba(130, 211, 156, .12);font-family:Space Grotesk,Segoe UI,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--page-bg);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;background:var(--page-bg)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{position:relative;isolation:isolate;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:76px 22px 38px;background:radial-gradient(circle at 13% 12%,rgba(198,162,76,.18),transparent 28%),radial-gradient(circle at 88% 82%,rgba(242,122,22,.1),transparent 28%),linear-gradient(145deg,var(--page-bg-light) 0%,var(--page-bg) 58%,#ebe1d2 100%)}.app-shell:before{content:"";position:fixed;z-index:-2;inset:0;pointer-events:none;background-image:url(/geko-recorder-background.png);background-repeat:no-repeat;background-position:center;background-size:cover}.app-shell:after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at center,#fffcf505,#e5dac81f),linear-gradient(to bottom,#fffbf30a,#e1d3bf14)}.help-link{position:absolute;z-index:3;top:20px;right:22px;display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border:1px solid rgba(34,55,70,.22);border-radius:8px;color:var(--panel-bg);background:#faf7f0e0;box-shadow:0 8px 24px #2237461a;text-decoration:none;font-size:.92rem;font-weight:750;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .16s ease,border-color .16s ease,transform .16s ease,background .16s ease}.help-link:hover{color:var(--accent-hover);border-color:#f27a168c;background:#fffbf3f7;transform:translateY(-1px)}.recorder-card{position:relative;z-index:2;width:min(100%,740px);padding:clamp(26px,5vw,46px);border:1px solid var(--panel-border);border-radius:22px;color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 42%),var(--panel-bg);box-shadow:0 28px 70px #2237463d,0 8px 22px #22374621,inset 0 1px #ffffff0d}.brand-header{display:flex;align-items:center;gap:20px;margin-bottom:24px}.brand-mark{flex:0 0 auto;width:72px;height:72px;display:grid;place-items:center;overflow:hidden;border:2px solid var(--accent);border-radius:15px;color:transparent;background-color:var(--page-bg-light);background-image:url(/geko-recorder-logo.png);background-repeat:no-repeat;background-position:center;background-size:78%;box-shadow:0 10px 22px #09161f47,0 0 0 4px #f27a1614;font-size:0}.eyebrow{margin:0 0 5px;color:var(--accent);font-size:.82rem;font-weight:850;letter-spacing:.15em;line-height:1.2;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:0;color:var(--text);font-size:clamp(2.35rem,7vw,3.45rem);font-weight:800;line-height:.98;letter-spacing:-.045em}h2{margin-bottom:0;color:var(--text);font-size:1.28rem;line-height:1.2;overflow-wrap:anywhere}.intro{max-width:620px;margin-bottom:29px;color:var(--muted);font-size:1.05rem;line-height:1.68}.field-label{display:block;margin-bottom:9px;color:var(--text);font-size:.98rem;font-weight:750}.text-input{width:100%;min-height:56px;padding:14px 16px;border:1px solid var(--input-border);border-radius:9px;outline:none;color:var(--text);background:var(--input-bg);box-shadow:inset 0 1px #ffffff06;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.text-input::placeholder{color:#f7f1e780}.text-input:hover:enabled{border-color:#f7f1e761}.text-input:focus{border-color:var(--accent);background:#ffffff17;box-shadow:0 0 0 3px var(--accent-soft)}.text-input:disabled{cursor:not-allowed;opacity:.58}.consent-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:20px 0 26px;color:var(--muted);font-size:.94rem;line-height:1.52;cursor:pointer}.consent-row input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--accent)}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}button{min-height:52px;padding:12px 17px;border:1px solid transparent;border-radius:8px;cursor:pointer;font-weight:780;transition:transform .15s ease,opacity .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}button:hover:enabled{transform:translateY(-1px)}button:active:enabled{transform:translateY(0)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(242,122,22,.34);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.38}.primary-button{color:#fff;background:var(--accent);box-shadow:0 7px 16px #8f4c134d}.primary-button:hover:enabled{background:var(--accent-hover);box-shadow:0 9px 20px #8f4c135c}.secondary-button{color:var(--text);border-color:#f7f1e738;background:#ffffff0e}.secondary-button:hover:enabled{border-color:#f27a16ad;background:#ffffff16}.stop-button{color:#f3c7c7;border-color:#c94d4d70}.stop-button:hover:enabled{border-color:#e66565c7;background:#c94d4d1a}.danger-button{color:#fff;background:var(--danger);box-shadow:0 7px 16px #70202038}.danger-button:hover:enabled{background:#b83f3f}.recording-panel,.preview-panel{margin-top:23px;padding:21px;border:1px solid rgba(247,241,231,.13);border-radius:14px;background:#ffffff0b;box-shadow:inset 0 1px #ffffff06}.recording-status{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--text);font-weight:800}.recording-dot{width:11px;height:11px;border-radius:50%;background:#e55a55;box-shadow:0 0 #e55a5594;animation:pulse 1.4s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px #e55a5500}to{box-shadow:0 0 #e55a5500}}.level-track{height:12px;overflow:hidden;border:1px solid rgba(247,241,231,.07);border-radius:999px;background:#0511198c}.level-track span{display:block;height:100%;min-width:2px;border-radius:inherit;background:linear-gradient(90deg,#81cd97,#e3b34f 66%,#e55a55);transition:width 70ms linear}.time-row{display:flex;justify-content:space-between;gap:20px;margin-top:11px;color:var(--muted)}.time-row strong{color:var(--text);font-variant-numeric:tabular-nums}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.duration-badge{flex:0 0 auto;padding:6px 10px;border:1px solid rgba(242,122,22,.24);border-radius:999px;color:#ffae67;background:var(--accent-soft);font-weight:800;font-variant-numeric:tabular-nums}audio{width:100%;margin:6px 0 18px;border-radius:8px;color-scheme:light}.preview-actions{margin-top:4px}.status-message{margin:19px 0 0;padding:13px 15px;border:1px solid rgba(247,241,231,.1);border-radius:9px;color:var(--muted);background:#ffffff0d;line-height:1.45}.status-success{color:var(--success);border-color:#82d39c33;background:var(--success-soft)}.status-error{color:#ffabab;border-color:#c94d4d38;background:var(--danger-soft)}.status-loading,.status-info{color:#ffc08a;border-color:#f27a1633;background:var(--accent-soft)}.page-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:31px;padding-top:19px;border-top:1px solid rgba(247,241,231,.13);color:#f7f1e78f;font-size:.82rem}.page-footer a{color:#f7f1e7c2}.page-footer a:hover{color:var(--accent)}@media(max-width:700px){.app-shell:before{background-position:62% center}}@media(max-width:560px){.app-shell{align-items:start;padding:72px 12px 22px}.help-link{top:14px;right:13px;min-height:37px;padding:7px 12px;font-size:.86rem}.recorder-card{padding:25px 19px;border-radius:17px}.brand-header{align-items:flex-start;gap:14px}.brand-mark{width:58px;height:58px;border-radius:12px}h1{font-size:clamp(2.05rem,12vw,2.65rem)}.intro{font-size:.98rem}.button-grid{grid-template-columns:1fr}.preview-heading{align-items:flex-start}.page-footer{flex-direction:column;align-items:center;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}