/* Website display and tutorial controls. Nothy itself is rendered from current app sources. */
/* Full product story. Existing Nothy/site tokens own the palette and typography. */
[hidden] { display:none!important; }
.entrance { animation-name:landing-enter; }
@keyframes landing-enter { from { translate:0 18px; } to { translate:0 0; } }
.hero { height:auto; min-height:0; padding-bottom:160px; }
.hero-copy { padding-top:148px; }
h1 { font-size:clamp(52px,5.7vw,86px); line-height:1.02; max-width:1100px; margin:28px auto 25px; }
h1>span:last-child { color:#a0aaa6; }
.description { max-width:560px; font-size:16px; }
.offline-line { display:flex; justify-content:center; align-items:center; gap:7px; color:#b9e8db; font-size:12px; margin:15px 0 0; }
.offline-line svg { width:15px;height:15px; }
.hero-actions { margin-top:26px; }
.experience { position:relative; top:auto; left:auto; width:min(1040px,calc(100% - 64px)); margin:76px auto 0; z-index:6; scroll-margin-top:30px; }
.demo-intro { text-align:center; }
.hero .section-kicker { color:var(--accent); font-size:10px; line-height:1.6; font-weight:500; letter-spacing:.15em; margin:0 0 24px; }
.demo-intro .section-kicker { margin-bottom:10px; }
.demo-hint { color:var(--muted); font-size:15px; margin:0 0 24px; }
.feature-tabs { display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:6px;border:1px solid #ffffff14;border-radius:17px;background:#101817e6; }
.feature-tabs button { display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;border-radius:11px;background:transparent;color:var(--muted);font-size:12px;transition:background .2s,color .2s; }
.feature-tabs button svg { width:17px;height:17px; }
.feature-tabs button:hover { color:var(--text); background:#ffffff08; }
.feature-tabs button[aria-selected=true] { background:#3fbf8f20;color:#b9e8db;box-shadow:inset 0 0 0 1px #3fbf8f35; }
.scenario-summary { position:relative;text-align:center;padding:30px 24px 25px;min-height:176px; }
.scenario-summary h2 { font-weight:450;font-size:27px;letter-spacing:-.035em;line-height:1.2;margin:0 0 10px; }
.scenario-summary p { max-width:610px;margin:0 auto 14px;font-size:13px;line-height:1.65;color:var(--muted); }
.scenario-badge { font-size:10px;color:#8eceb4; }
.scenario-badge.is-ai { color:var(--purple); }
.screen-desktop { height:520px;background:radial-gradient(ellipse at 22% 90%,#3b6354,transparent 58%),linear-gradient(140deg,#446556,#243c35 55%,#111b1a); }
.screen-desktop .app-stage { left:16%;width:68%; }
.screen-desktop .demo-surface { border-radius:0 0 23px 23px;animation:none;transition:none; }
.screen-desktop .notch { height:30px;width:160px; }
.composer-heading { grid-template-columns:1fr 160px 1fr;height:34px; }
.dictated-text { min-height:46px;margin:10px 4px 12px;font-size:13px;white-space:pre-line; }
.composer-bottom { padding-top:7px; }
.app-nav { font-size:10px; }
.app-nav kbd { font-size:9px; }
.app-top-tools .app-icon:first-child { display:none; }
.composer-mode { overflow:hidden; }
.composer-mode>span { overflow:hidden;text-overflow:ellipsis; }
.composer-mode>.inline-wave { display:none; }
.screen-frame[data-story=instruction] .composer-mode>span { display:none; }
.screen-frame[data-story=instruction] .composer-mode>.inline-wave { display:flex;height:20px;max-width:95px; }
.inline-wave i { width:2px;background:var(--purple); }
.screen-frame[data-story=instruction] .app-enhance { color:var(--purple); }
.recording-strip { padding:9px 15px;min-height:42px;gap:8px; }
.recording-strip>span { margin-right:auto; }
.recording-strip .waveform { flex:0 0 100px;margin-left:168px; }
.recording-strip .waveform i { width:2px; }
.is-recording { width:470px; }
.is-recording .notch { height:30px;width:160px; }
.transcribing-strip { padding:14px 15px;justify-content:flex-start;min-height:42px; }
.voice-instruction { position:absolute;top:calc(100% + 20px);left:6%;right:6%;padding:12px 20px;background:#1d1d25;border:1px solid #a78bfa40;border-radius:12px;color:#ddd4ed;text-align:center; }
.voice-instruction>span { display:block;font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--purple);margin-bottom:5px; }
.voice-instruction p { font-size:12px;line-height:1.5;margin:0; }
.desktop-note { top:254px;height:164px;left:22%;width:56%; }
.note-body { padding:13px 20px; }
.note-body h3 { font-weight:450;margin:6px 0 8px;font-size:15px;letter-spacing:-.02em;color:#c7d2cc; }
.note-body p { font-size:12px;line-height:1.55;white-space:pre-line; }
.note-eyebrow { color:#92aa9d; }
.note-placeholder { color:#91a59a; }
.keystroke { top:432px;flex-direction:row;justify-content:center;gap:12px; }
.keystroke>kbd { width:auto;min-width:34px;height:30px;padding:0 9px;font-size:16px;border-radius:7px;border-bottom-width:2px; }
.keystroke>span { font-size:10px; }
.story-steps { left:8%;right:8%;bottom:15px;display:flex;gap:12px; }
.story-steps button { flex:1;font-size:9px;line-height:1.3;padding:10px 0 5px;min-width:0; }
.screen-frame[data-has-result=true] .note-body p { color:#d2ecdf; }
.screen-frame[data-story=scanning] .note-body { outline:1px dashed var(--accent);outline-offset:-6px;background:#3fbf8f10; }
.screen-frame[data-story=scanning] .note-body:after { content:'';position:absolute;left:12px;right:12px;top:40px;height:1px;background:var(--accent);box-shadow:0 0 16px #3fbf8f;animation:scan 2s ease-in-out infinite; }
.screen-frame[data-feature=layout] .app-stage { display:none; }
.screen-frame[data-story=correcting] .note-body p { color:#dc9c9c;text-decoration:line-through;text-decoration-color:#de1936; }
.screen-frame[data-story=typing] .note-body p { clip-path:inset(0 100% 0 0);animation:type-layout 1.8s steps(7,end) forwards; }
.screen-frame[data-story=choosing] .dictated-text { background:#3fbf8f16;outline:1px solid #3fbf8f40;border-radius:6px;padding:10px; }
.screen-frame[data-feature=ocr][data-story=done] .note-body:after { display:none; }
@keyframes scan { to { transform:translateY(85px); } }
@keyframes type-layout { to { clip-path:inset(0 0 0 0); } }
.soundscape-far { bottom:200px; }.soundscape-near { bottom:80px; }
.foreground { z-index:5;bottom:20px;opacity:.7; }
.demo-caption { min-height:32px; }
.hero-bottom { bottom:35px; }

/* Preserve the green illustrated display around the original Nothy components. */
.screen-frame{padding:8px;border:1px solid #35423e;border-radius:24px;background:#161a1a;box-shadow:0 28px 80px #0006}
.feature-tabs{max-width:none}.feature-tabs button{border:0}
.feature-tabs button[data-feature-tab][aria-selected=true]{background:#3fbf8f20;color:#b9e8db;border-color:transparent}
.foreground{height:auto}
.demo-caption{justify-content:center;margin-top:22px;gap:12px;color:#9ba9a4;align-items:center}
.replay{padding:0 11px;border:1px solid #ffffff15;background:#0e0f10;color:#8ea69c}
.story-steps button[aria-pressed=true]{color:#b5eed2;border-color:#3fbf8f}
#native-viewport{position:absolute;inset:0 0 60px;aspect-ratio:auto;border-radius:16px 16px 0 0;z-index:5;background:transparent}
#native-viewport .native-frame,#native-viewport .demo-loading{background:transparent}

.screen-frame[data-library=true] .desktop-note,.screen-frame[data-editor=true] .desktop-note,.screen-frame[data-editor=true] .desktop-menu{visibility:hidden}
.screen-frame[data-feature=pixel] #note-output::before{content:'';display:inline-block;vertical-align:middle;width:25px;height:25px;background:#a78bfa;border-radius:5px;margin-right:12px}
.screen-frame[data-story=capture] .app-stage{display:none}
.screen-frame[data-story=capture] .note-body{outline:1px dashed var(--accent);outline-offset:-6px;background:#3fbf8f10}
@media(max-width:1050px){.screen-desktop .app-stage{width:86%;left:7%}.screen-desktop .app-nav kbd{display:none}}
@media(max-width:700px) {
  .hero { min-height:0;padding-bottom:95px; }.hero-copy { padding:calc(122px + env(safe-area-inset-top)) 20px 0; }
  h1 { font-size:clamp(37px,9.5vw,62px);margin:26px -5px 22px;line-height:1.06; }.description { font-size:13px;max-width:370px; }.offline-line { font-size:10px; }
  .hero-actions { margin:23px 0 13px; }.experience { width:calc(100% - 28px);margin-top:55px;scroll-margin-top:20px; }
  .demo-intro .section-kicker { font-size:8px;letter-spacing:.11em; }.demo-hint { font-size:12px; }.feature-tabs { grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;border-radius:14px; }.feature-tabs button { gap:5px;min-height:43px;padding:8px 4px;font-size:10px; }.feature-tabs button svg { width:14px;height:14px; }
  .scenario-summary { padding:26px 8px 20px;min-height:191px; }.scenario-summary h2 { font-size:23px; }.scenario-summary p { font-size:12px;line-height:1.6; }.scenario-badge { font-size:9px; }
  .screen-desktop { height:496px; }.screen-desktop .app-stage { width:96%;left:2%; }.composer-heading { grid-template-columns:1fr 94px 1fr;height:28px; }.screen-desktop .notch { width:94px;height:25px; }.screen-desktop .composer-mode { font-size:2.1cqw; }.screen-desktop .app-auto { display:none; }.dictated-text { font-size:3.15cqw;min-height:53px;line-height:1.6;margin:15px 2px 14px; }
  .screen-desktop .app-nav { font-size:1.85cqw; }.screen-desktop .app-icon { width:4.8cqw;height:4.8cqw; }.screen-desktop .app-send { font-size:1.85cqw; }
  .is-recording { width:100%; }.recording-strip { padding:8px 10px;min-height:38px;gap:5px; }.recording-strip .waveform { flex:0 0 57px;gap:2px;margin-left:93px; }.recording-strip .waveform i { width:2px; }.recording-strip>span { font-size:8px; }.recording-strip time { font-size:8px; }.recording-dot { width:5px;height:5px; }.transcribing-strip { font-size:8px;gap:5px;padding:12px 10px;min-height:38px; }.app-spinner { width:8px;height:8px; }
  .voice-instruction { left:3%;right:3%;top:calc(100% + 16px);padding:10px 12px; }.voice-instruction>span { font-size:7px; }.voice-instruction p { font-size:10px; }
  .desktop-note { top:248px;left:5%;width:90%;height:146px; }.note-body { padding:12px 14px; }.note-body h3 { font-size:13px;margin:5px 0 7px; }.note-body p { font-size:10px;line-height:1.6; }.note-eyebrow { font-size:6px; }
  .keystroke { top:407px;gap:8px;padding:0 16px; }.keystroke>span { font-size:9px;max-width:240px; }.keystroke>kbd { height:28px;font-size:14px;min-width:30px; }
  .story-steps { left:4%;right:4%;bottom:10px;gap:6px; }.story-steps button { font-size:7px;padding-top:10px;min-height:44px; }.demo-caption { font-size:9px; }.demo-caption>#demo-state { max-width:260px; }.replay { min-height:34px;font-size:10px; }
  .foreground { width:1100px;bottom:30px; }.hero-bottom { bottom:24px; }.scene-index { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .screen-frame[data-story=typing] .note-body p { clip-path:none; }
}

.screen-frame[data-story=done] .note-body p { animation:result-enter .4s var(--ease) both; }
.screen-frame[data-timeline-paused=true] .note-body p { animation:none; }
@keyframes result-enter { from { translate:0 4px; } to { translate:0 0; } }
html[data-motion=paused] *::after,
html[data-scene-paused=true] .hero *::after,
.screen-frame[data-timeline-paused=true] *::after { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { *::after { animation:none!important;transition:none!important; } }

.recording-dot { background:#de1936; }

@media(max-width:700px){.screen-frame{padding:5px;border-radius:17px}.feature-tabs button:last-child{grid-column:auto}.demo-caption{flex-wrap:wrap}.demo-caption #demo-state{max-width:65%}.native-viewport{border-radius:11px}}

/* One shared tutorial layout at every viewport; app components keep their own styles. */
.screen-desktop{--demo-action-color:var(--accent);--demo-key-size:clamp(56px,6.8cqw,72px);--demo-cue-gap:clamp(12px,1.6cqw,18px);--demo-cue-title:clamp(14px,1.65cqw,18px);--demo-result-top:350px;--demo-result-height:154px;--demo-cue-top:160px;--demo-cue-bottom:230px;--demo-tool-space:190px;height:570px}
.screen-frame[data-feature=assistant] .screen-desktop,.screen-frame[data-feature=translate] .screen-desktop,.screen-frame[data-feature=enhancer] .screen-desktop{--demo-action-color:var(--purple)}
.screen-frame[data-feature=layout] .screen-desktop{--demo-action-color:#ffd185}
.screen-frame[data-feature=layout][data-story=result] .screen-desktop{--demo-action-color:var(--accent)}
.desktop-note{top:var(--demo-result-top);height:var(--demo-result-height)}
.screen-desktop>.keystroke{top:var(--demo-cue-top);bottom:var(--demo-cue-bottom);left:4%;right:4%;width:auto;z-index:7;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--demo-cue-gap);padding:0;pointer-events:none}
.cue-action{display:flex;align-items:center;justify-content:center;gap:var(--demo-cue-gap);max-width:100%}
.cue-action>kbd,.cue-tool{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:var(--demo-key-size);height:var(--demo-key-size);border-radius:14px;border:1px solid #ffffff2e;border-bottom:4px solid #081a15;background:linear-gradient(#2e4940,#172b24);box-shadow:0 6px 20px #0002;color:var(--text);font:30px/1 'Helvetica Neue',sans-serif;transition:transform .16s,background .16s}
.cue-action>kbd small{font-size:10px;line-height:1.1;font-family:inherit;color:var(--muted)}
.cue-tool{border:1px solid #ffffff20;background:#111c1880;box-shadow:none;color:var(--demo-action-color)}.cue-tool svg{width:30px;height:30px}
.cue-copy{max-width:430px;text-align:left}.cue-copy strong{display:block;font-size:var(--demo-cue-title);line-height:1.35;font-weight:500;color:var(--text)}.cue-copy p{max-width:380px;margin:6px 0 0;font-size:clamp(11px,1.15cqw,13px);line-height:1.5;color:#b0c2b9}.cue-copy p:empty{display:none}
.keystroke[data-gesture=hold] kbd,.keystroke[data-gesture=press] kbd{transform:translateY(4px);background:var(--demo-action-color);color:#0e0f10;box-shadow:0 0 28px color-mix(in srgb,var(--demo-action-color) 22%,transparent);border-color:color-mix(in srgb,var(--demo-action-color) 75%,white)}
.keystroke[data-gesture=hold] kbd small,.keystroke[data-gesture=press] kbd small{color:#153b2d}.keystroke[data-gesture=double] kbd{animation:cue-double 1.8s ease-in-out infinite}
@keyframes cue-double{0%,20%,45%,100%{transform:translateY(0)}10%,35%{transform:translateY(4px);background:var(--purple)}}
.cue-speech{display:flex;align-items:center;justify-content:center;gap:12px;max-width:680px;padding:0 8px;color:var(--text)}.cue-speech q{font-size:clamp(12px,1.5cqw,16px);line-height:1.55;text-align:left}.cue-speech q span{color:#9cb2a7;transition:color .16s}.cue-speech q span.spoken{color:#f1f4f2}
.voice-indicator{display:flex;align-items:center;gap:3px;flex:none;color:var(--demo-action-color)}.voice-indicator svg{width:21px;height:21px;margin-right:4px}.voice-indicator i{height:18px;width:3px;border-radius:3px;background:currentColor;animation:cue-voice .7s ease-in-out infinite alternate}.voice-indicator i:nth-of-type(2){animation-delay:-.3s}.voice-indicator i:nth-of-type(3){animation-delay:-.5s}.voice-indicator i:nth-of-type(4){animation-delay:-.1s}@keyframes cue-voice{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.screen-frame[data-large-view=true] #native-viewport{bottom:var(--demo-tool-space)}
.screen-frame[data-large-view=true] .keystroke{top:calc(100% - var(--demo-tool-space) + 14px);bottom:64px}
.screen-frame[data-feature=layout] .desktop-note,.screen-frame[data-feature=ocr] .desktop-note,.screen-frame[data-feature=screenshot] .desktop-note{display:none}
.demo-keyboard{position:absolute;top:var(--demo-result-top);left:50%;transform:translateX(-50%);width:min(540px,92%);padding:13px;border:1px solid #ffffff25;border-radius:14px;background:#14211ddd;box-shadow:0 12px 30px #0002;z-index:4}
.keyboard-row{display:flex;justify-content:center;gap:5px;margin-bottom:5px}.keyboard-row:last-child{margin:0}.keyboard-row kbd{position:relative;display:grid;place-items:center;width:clamp(24px,3.8cqw,40px);height:clamp(26px,3.1cqw,34px);border-radius:5px;border:1px solid #ffffff20;border-bottom:3px solid #0e0f10;background:#28362f;color:#ced8d2;font:12px/1.2 'Helvetica Neue',sans-serif;transition:background .06s,transform .06s}.keyboard-row kbd small{font-size:8px;color:#97a69d}.keyboard-row kbd.is-down{background:var(--demo-action-color);color:#151a17;transform:translateY(2px)}.keyboard-row kbd.is-down small{color:#323c32}.keyboard-row .keyboard-space{width:46%;font-size:11px}
.capture-source{position:absolute;top:var(--demo-result-top);left:50%;transform:translateX(-50%);width:min(560px,88%);height:var(--demo-result-height);z-index:4}
.sample-paper{position:absolute;inset:-5px 8%;padding:18px 24px;background:#e9e7df;color:#353834;transform:rotate(-2.5deg);box-shadow:0 12px 26px #0003;border-radius:2px;overflow:hidden}.paper-label{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#777e74}.sample-paper h3{margin:8px 0;font-size:15px;font-weight:500}.sample-paper p{margin:0;font-size:12px;line-height:1.6;white-space:pre-line}.paper-rule{display:block;height:1px;background:#bcc2b8;width:100%;margin-top:14px}.paper-rule.short{width:52%;margin-top:8px}
.sample-web{display:none;height:100%;background:#f4f4f5;color:#18181a;border-radius:8px;overflow:hidden}.sample-web-bar{height:24px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#e7e7e9}.sample-web-bar i{width:5px;height:5px;border-radius:50%;background:#a78bfa}.sample-web-bar span{font-size:8px;color:#6b6d70;margin-left:10px}.sample-web h3{margin:22px 24px 15px;font-size:clamp(16px,2cqw,23px)}.sample-web>p{display:inline-block;margin:0 24px;background:var(--purple);color:#211b31;padding:8px 14px;border-radius:6px;font-size:10px}
.screen-frame[data-feature=screenshot] .sample-paper{display:none}.screen-frame[data-feature=screenshot] .sample-web{display:block}
.capture-selection{position:absolute;border:1.5px solid var(--accent);background:#3fbf8f0e;box-shadow:0 0 0 1000px #0002;z-index:2;pointer-events:none}.capture-selection:before,.capture-selection:after{content:'';position:absolute;width:5px;height:5px;background:white;border:1px solid var(--accent)}.capture-selection:before{top:-3px;left:-3px}.capture-selection:after{right:-3px;bottom:-3px}
.demo-cursor{position:absolute;top:0;left:0;width:28px;height:32px;z-index:9;pointer-events:none;filter:drop-shadow(0 2px 2px #0007)}.demo-cursor>svg{width:100%;height:100%}.demo-cursor>i{display:none;position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;border:2px solid var(--accent);background:#3fbf8f33}.demo-cursor[data-down=true]>i{display:block}
.screen-desktop .story-steps{bottom:12px}
@media(max-width:700px){.screen-desktop{--demo-cue-top:100px;--demo-cue-bottom:238px}.cue-action{gap:12px}.cue-copy{max-width:240px}.cue-speech{padding:0;gap:9px}.cue-speech q{font-size:12px}.voice-indicator i{height:15px}.voice-indicator svg{width:18px}.desktop-note{left:5%;width:90%}.sample-paper{inset:0 2%;padding:16px 20px}.sample-paper h3{font-size:14px}.sample-paper p{font-size:11px}.story-steps[data-dense=true] button{font-size:0}.story-steps[data-dense=true] button:after{content:attr(data-step-number);font-size:9px}.demo-cursor{width:23px;height:27px}}
@media(prefers-reduced-motion:reduce){.voice-indicator i,.keystroke[data-gesture=double] kbd{animation:none}.cue-speech q span,.keyboard-row kbd{transition:none}}

@media(min-width:701px){.screen-frame[data-editor=true] .screen-desktop{height:720px;--demo-tool-space:160px}}