/* Website tutorial composition. The native Nothy iframe keeps its own design. */
.experience { width:min(1180px,calc(100% - 64px)); }
.demo-intro .section-kicker { margin-bottom:9px; }
.demo-hint { margin-bottom:0; }
.scenario-summary { min-height:149px;padding:27px 24px 24px; }
.scenario-summary h2 { font-size:30px; }
.scenario-summary p { max-width:690px;margin-bottom:8px; }
.screen-frame { border-radius:26px;padding:9px; }
.screen-desktop { height:700px;--scene-top:180px;--note-height:200px;--note-inset:22px;--demo-action-color:var(--accent);background:radial-gradient(ellipse at 10% 80%,#3b6354,transparent 65%),linear-gradient(120deg,#446556,#243c35 58%,#111b1a); }
.screen-frame[data-feature=politeness] .screen-desktop { --demo-action-color:var(--purple); }
.desktop-menu { height:34px; }
#native-viewport { bottom:165px;pointer-events:none; }
.screen-frame[data-large-view=true] #native-viewport { bottom:220px; }
.screen-frame[data-editor=true] .screen-desktop { height:700px; }

/* Two ordered rows docked to the display, outside the labelled tabpanel. */
.experience>.feature-tabs { position:absolute;bottom:19px;left:19px;right:19px;z-index:12;margin:0;padding:7px;gap:3px 5px;border-radius:14px;background:#101817e6;backdrop-filter:blur(18px);box-shadow:0 8px 28px #0002;display:grid;justify-content:normal;grid-template-columns:repeat(6,minmax(0,1fr)); }
.feature-tabs button { min-width:0;min-height:44px;font-size:12px;white-space:nowrap;position:relative;border-radius:8px;transition:color .22s,background .22s,transform .22s; }
.feature-tabs button:hover { transform:translateY(-1px); }
.feature-tabs button:nth-child(n+7) { border-top:1px solid #ffffff0a;border-top-left-radius:0;border-top-right-radius:0; }
.feature-tabs button[aria-selected=true]::after { content:'';position:absolute;bottom:5px;left:calc(50% - 8px);width:16px;height:2px;background:var(--accent);border-radius:2px; }
.feature-tabs button:focus-visible { outline-offset:-2px; }
.feature-tabs button svg { width:16px;height:16px; }

/* The keyboard is intentionally cropped at the left edge, like the reference. */
.keyboard-stage { position:absolute;top:var(--scene-top);left:0;width:51%;height:338px;z-index:4;pointer-events:none; }
.demo-keyboard { position:absolute;inset:0 0 auto auto;transform:none;width:154%;padding:7px;border:1px solid #74767b;border-radius:12px;background:linear-gradient(135deg,#64666b,#3d3f44);box-shadow:0 16px 32px #0002; }
.keyboard-row { --key-height:48px;display:flex;gap:5px;margin:0 0 5px; }
.keyboard-row kbd { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:var(--key-units) 1 0;min-width:0;width:auto;height:var(--key-height);padding:4px;border:1px solid #72747a;border-bottom:3px solid #101114;border-radius:7px;background:linear-gradient(145deg,#34363b,#222328);box-shadow:inset 0 0 0 2px #17181b,0 1px 2px #0008;font:22px/1.1 'Helvetica Neue',Helvetica,sans-serif;color:#f0f0f2;white-space:pre;transition:background .1s,transform .1s,box-shadow .1s; }
.keyboard-row.keyboard-functions kbd { height:37px;font-size:11px; }
.keyboard-row kbd small { font:9px/1 'Helvetica Neue',Helvetica,sans-serif;color:#d3d3d7;margin-top:2px;transform:translateY(-2px); }
.keyboard-arrows { flex:var(--key-units) 1 0;min-width:0;height:var(--key-height);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px; }
.screen-frame .keyboard-row .keyboard-arrows kbd[data-letter] { height:auto;padding:0;font-size:11px;border-radius:5px; }
.keyboard-arrows [data-letter=LEFT] { grid-area:2 / 1; }.keyboard-arrows [data-letter=UP] { grid-area:1 / 2; }.keyboard-arrows [data-letter=DOWN] { grid-area:2 / 2; }.keyboard-arrows [data-letter=RIGHT] { grid-area:2 / 3; }
.keyboard-row kbd.is-guided { border-color:var(--demo-action-color); }
.key-guide { position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible;fill:none;stroke:var(--demo-action-color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.keyboard-row kbd.is-down { background:var(--demo-action-color);color:var(--bg);border-color:#b9e8db;transform:translateY(2px);box-shadow:inset 0 0 0 1px #b9e8db80,0 0 26px #3fbf8f35; }
.keyboard-row kbd.is-down small { color:#14211d; }
.keyboard-row kbd[data-letter=ENTER].is-down { background:var(--accent);color:#10221b;transform:translateY(4px) scale(.96);border-color:#b9e8db;box-shadow:inset 0 0 0 2px #b9e8db80,0 0 30px #3fbf8f80; }
.keyboard-row kbd[data-letter=ENTER].is-down::after { content:'';position:absolute;inset:-7px;border:2px solid var(--accent);border-radius:11px;transform:scale(calc(1 + var(--click-progress,0)*.5));opacity:calc(1 - var(--click-progress,0)); }

.keyboard-stage:has(#demo-keyboard[hidden]) { display:none; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .screen-desktop { height:820px;--scene-top:248px;--layout-cue-top:188px; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-stage { left:2%;width:96%; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .demo-keyboard { width:100%; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row { --key-height:58px; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row.keyboard-functions kbd { height:42px; }
.screen-frame:is([data-feature=layout],[data-feature=dictation]) .desktop-note { display:none; }
.screen-frame[data-feature=layout] .cue-content { top:var(--layout-cue-top);bottom:auto;left:5%;right:5%; }
.screen-frame[data-feature=layout] .cue-action { justify-content:center; }
.screen-frame[data-feature=layout] .cue-tool { position:static; }

.desktop-note { left:54%;top:var(--scene-top);width:42%;height:var(--note-height);border-radius:14px;background:#111716e6;transition:border-color .3s; }
.note-toolbar { height:36px;justify-content:space-between; }
.note-body { padding:22px var(--note-inset); }
.note-body p { margin:0;font-size:15px;line-height:1.55; }
#note-output:empty { display:none; }
.note-caret { display:inline-block;width:1px;height:21px;background:#9bada4;animation:blink 1s steps(1) infinite; }
.screen-frame[data-has-result=true] .note-caret { display:none; }
.screen-frame[data-has-result=true] .desktop-note { border-color:#3fbf8f50; }
.screen-frame[data-feature=politeness] .note-body p { font-size:14px; }

.screen-desktop>.keystroke,.screen-frame[data-large-view=true] .keystroke { inset:0;width:auto;display:block;padding:0;pointer-events:none; }
.cue-content { position:absolute;top:calc(var(--scene-top) + var(--note-height) + 22px);left:calc(54% + var(--note-inset) + 1px);right:calc(4% + var(--note-inset) + 1px); }
.cue-action { position:relative;justify-content:flex-start;gap:10px;min-height:30px; }
.screen-frame[data-large-view=true] .cue-content { top:auto;bottom:174px;left:5%;right:5%; }
.screen-frame[data-large-view=true] .cue-action { justify-content:center;min-height:42px; }.screen-frame[data-large-view=true] .cue-tool { position:static; }
.cue-tool { position:absolute;left:-36px;width:26px;height:26px;border:0;background:transparent; }
.cue-tool svg { width:23px;height:23px; }
.cue-copy { max-width:none; }
.cue-copy strong { font-size:20px;font-weight:450;line-height:1.3; }
.cue-speech { position:static;min-height:0;max-width:none;justify-content:flex-start;margin-top:16px;padding:0; }
.voice-visual { display:flex;align-items:center;width:100%;max-width:310px;height:58px;color:var(--demo-action-color); }
.voice-source { flex:none;position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,currentColor 55%,transparent);border-radius:50%;background:color-mix(in srgb,currentColor 8%,transparent); }
.voice-source svg { width:22px;height:22px; }
.voice-ring { position:absolute;inset:-1px;border:1px solid currentColor;border-radius:50%;pointer-events:none; }
.voice-travel { display:flex;align-items:center;justify-content:center;gap:5px;flex:none;width:44px; }
.voice-travel i { display:block;width:3px;height:3px;border-radius:50%;background:currentColor; }
.voice-bubble { position:relative;flex:1;min-width:0;height:58px;padding:8px 15px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:14px;background:color-mix(in srgb,currentColor 6%,transparent); }
.voice-wave { display:flex;align-items:center;justify-content:center;gap:3px;height:100%; }
.voice-wave i { flex:1;max-width:4px;height:8px;min-width:1px;background:currentColor;border-radius:3px; }
.screen-desktop .story-steps { left:7%;right:11%;bottom:124px;gap:14px; }
.story-steps button { position:relative;min-height:39px;padding:10px 0 5px;font-size:9px; }
.story-steps button[aria-pressed=true] { border-color:#ffffff25; }
.story-steps button[aria-pressed=true]::before { content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(var(--phase-progress,0));transform-origin:left; }
.scene-motion { position:absolute;right:4%;bottom:124px;z-index:8;width:34px;height:34px;display:grid;place-items:center;background:#ffffff08;border-radius:50%;color:var(--muted); }
.scene-motion svg { width:14px;height:14px; }
.scene-motion[aria-pressed=true] svg { fill:currentColor;stroke:none; }

.capture-source { top:var(--scene-top);left:54%;width:42%;height:var(--note-height);transform:none; }
.sample-paper { padding:20px var(--note-inset);inset:0;transform:none;border-radius:10px; }
.sample-paper h3 { font-size:19px;margin:0 0 14px; }
.sample-paper p { font-size:15px;line-height:1.7; }.sample-paper .paper-label,.sample-paper .paper-rule { display:none; }
.sample-web h3 { margin:30px 24px 20px; }
.screen-frame[data-feature=ocr] .keyboard-stage,.screen-frame[data-story=capture] .keyboard-stage { opacity:.65; }
.screen-frame[data-feature=pixel] #note-output::before { width:34px;height:34px;border-radius:6px; }

@media(max-width:1000px) and (min-width:701px) {
  .screen-desktop,.screen-frame[data-editor=true] .screen-desktop { height:690px; }
  .screen-desktop { --note-inset:18px;--scene-top:180px; }
  .keyboard-row { --key-height:43px; }.keyboard-row kbd { font-size:18px; }
  .keyboard-row kbd small { font-size:7px; }
  .screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row { --key-height:48px; }.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row.keyboard-functions kbd { height:37px; }
  .note-body { padding:20px var(--note-inset); }.note-body p,.screen-frame[data-feature=politeness] .note-body p { font-size:13px;line-height:1.5; }.sample-paper h3 { font-size:17px; }.sample-paper p { font-size:13px; }
  .cue-copy strong { font-size:18px; }.voice-visual { max-width:280px; }
  .feature-tabs button { font-size:10px;gap:5px;padding-inline:4px; }
}
@media(max-width:700px) {
  .experience { width:calc(100% - 24px);scroll-margin-top:calc(18px + env(safe-area-inset-top)); }
  .scenario-summary { padding:23px 8px 20px;min-height:172px; }.scenario-summary h2 { font-size:25px; }.scenario-summary p { font-size:12px; }
  .screen-frame { padding:5px;border-radius:18px; }
  .screen-desktop,.screen-frame[data-editor=true] .screen-desktop { height:800px;border-radius:12px;--note-inset:15px;--scene-top:165px;--note-height:174px; }
  .desktop-menu { padding:0 12px; }.desktop-menu>div>span { display:none; }.menu-clock { margin-left:12px; }
  #native-viewport { bottom:160px;border-radius:12px 12px 0 0; }
  .screen-frame[data-large-view=true] #native-viewport { bottom:290px; }
  .keyboard-stage { top:var(--scene-top);left:0;width:94%;height:160px; }
  .demo-keyboard { width:148%;padding:5px;border-radius:9px; }
  .keyboard-row { --key-height:27px;gap:3px;margin-bottom:3px; }.keyboard-row kbd {border-radius:4px;font-size:13px;border-bottom-width:2px;padding:2px; }.keyboard-row kbd small { font-size:6px;margin-top:2px; }.keyboard-row.keyboard-functions kbd { height:21px;font-size:7px; }.keyboard-arrows { gap:2px; }.screen-frame .keyboard-row .keyboard-arrows kbd[data-letter] { font-size:7px;border-radius:3px; }
  .screen-frame:is([data-feature=layout],[data-feature=dictation]) .screen-desktop { height:650px;--scene-top:235px;--layout-cue-top:175px; }
  .screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-stage { left:3%;width:94%; }
  .screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row { --key-height:26px; }.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row kbd { font-size:11px; }.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row kbd small { font-size:5px; }.screen-frame:is([data-feature=layout],[data-feature=dictation]) .keyboard-row.keyboard-functions kbd { height:21px;font-size:6px; }
  .desktop-note { top:365px;left:5%;width:90%;height:var(--note-height);border-radius:11px; }
  .note-toolbar { height:28px; }.note-body { padding:18px var(--note-inset); }.note-body p { font-size:13px;line-height:1.5; }.screen-frame[data-feature=politeness] .note-body p { font-size:12px; }
  .cue-speech { margin-top:13px; }.voice-visual { height:48px;max-width:280px; }.voice-bubble { height:48px;padding:4px 10px; }.voice-wave { gap:2px; }.voice-source { width:34px;height:34px; }.voice-source svg { width:20px;height:20px; }.voice-travel { width:36px; }
  .cue-content { top:558px;left:calc(5% + var(--note-inset) + 1px);right:calc(5% + var(--note-inset) + 1px); }.cue-action { gap:8px;min-height:26px; }.cue-tool { left:-26px;width:20px;height:20px; }.cue-tool svg { width:18px;height:18px; }.cue-copy { max-width:none; }.cue-copy strong { font-size:16px; }
  .screen-frame[data-large-view=true] .cue-content { top:auto;bottom:170px; }.key-guide { stroke-width:1.5; }
  .screen-desktop .story-steps { left:5%;right:15%;bottom:98px;gap:6px; }.story-steps button { font-size:7px;min-height:35px;padding-top:9px; }
  .scene-motion { bottom:101px;right:4%;width:28px;height:28px; }
  .experience>.feature-tabs { left:12px;right:12px;bottom:12px;grid-template-columns:repeat(6,minmax(101px,1fr));column-gap:3px;padding:5px;overflow-x:auto;border-radius:10px;scrollbar-width:thin;scrollbar-color:#3fbf8f55 transparent;overscroll-behavior-x:contain; }
  .feature-tabs button { min-height:37px;font-size:10px;gap:6px;padding:7px 5px; }.feature-tabs button svg { width:13px;height:13px; }.feature-tabs button[aria-selected=true]::after { bottom:2px; }
  .capture-source { top:365px;left:5%;width:90%;height:var(--note-height); }.sample-paper { padding:18px var(--note-inset); }.sample-paper h3 { font-size:16px; }.sample-paper p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .feature-tabs button,.keyboard-row kbd,.desktop-note { transition:none; }
  .note-caret { animation:none; }
}

.demo-cursor { width:22px;height:28px; }.demo-cursor>i { display:none!important; }

.screen-frame[data-editor=true] #native-viewport { top:34px; }
.screen-frame[data-editor=true] .desktop-menu { visibility:visible; }
.screen-frame[data-feature=pixel] .desktop-note,.screen-frame[data-feature=pixel] .keyboard-stage { display:none; }
.pixel-scene { position:absolute;left:3%;top:var(--scene-top);width:48%;height:290px;border-radius:16px;overflow:hidden;box-shadow:0 15px 32px #0003;z-index:4; }
.pixel-scene>svg { display:block;width:100%;height:100%;stroke:none; }
.pixel-target { position:absolute;left:61%;top:47%;width:28px;height:28px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006,0 0 0 9px #ffffff25; }
.pixel-result { position:absolute;top:calc(var(--scene-top) + 55px);left:58%;width:34%;min-height:150px;padding:24px;display:flex;align-items:center;gap:22px;border:1px solid #ffffff20;border-radius:16px;background:#111716e6;z-index:4; }
.pixel-swatch { display:block;flex:none;width:64px;height:64px;border-radius:12px;background:#a78bfa; }
.pixel-result samp { display:block;font:26px/1.3 ui-monospace,monospace;color:var(--text); }
.pixel-result small { display:block;margin-top:8px;font-size:11px;color:var(--muted); }
.screen-frame[data-feature=pixel] .cue-content { left:58%;right:4%;top:calc(var(--scene-top) + 235px); }
@media (min-width:701px) and (max-width:1000px) {
  .screen-frame:is([data-feature=layout],[data-feature=dictation]) .screen-desktop { height:730px;--scene-top:218px;--layout-cue-top:164px; }
  .pixel-result { padding:18px;gap:14px; }.pixel-swatch { width:44px;height:44px; }.pixel-result samp { font-size:19px; }.pixel-result small { font-size:9px; }
}
@media(max-width:700px) {
  .pixel-scene { left:5%;width:90%;height:215px; }
  .pixel-result { left:calc(5% + var(--note-inset));top:405px;width:calc(90% - var(--note-inset)*2);min-height:104px;padding:18px; }
  .pixel-swatch { width:52px;height:52px; }.pixel-result samp { font-size:24px; }
  .screen-frame[data-feature=pixel] .cue-content { top:540px;left:calc(5% + var(--note-inset));right:5%; }
}

.screen-frame[data-feature=history] .desktop-note { background:#111214; }
.screen-frame[data-feature=history] .note-body p { font:15px/1.7 ui-monospace,monospace;color:#d2ecdf; }
.screen-frame[data-feature=history] .note-body p:not(:empty)::before { content:'› ';color:var(--accent); }
.sample-web>img { display:block;width:100%;height:100%;object-fit:fill; }
.screen-frame[data-feature=screenshot]:not([data-editor=true]) .capture-source { height:auto;aspect-ratio:760/440; }
.screen-frame[data-feature=screenshot]:not([data-editor=true]) .cue-content { top:490px; }
@media (min-width:701px) and (max-width:1000px) { .screen-frame[data-feature=screenshot]:not([data-editor=true]) .cue-content { top:405px; } }
@media(max-width:700px) { .screen-frame[data-feature=screenshot]:not([data-editor=true]) .cue-content { top:585px; } }

/* Readable numbered product stories, with concrete keyboard and OCR examples. */
.feature-deep .section-kicker[data-app-number],.screenshot-feature .section-kicker[data-app-number] { display:flex;align-items:center;gap:12px;font-size:13px; }
.section-kicker[data-app-number]::before { content:attr(data-app-number);display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--example-border);border-radius:50%;font:13px/1 ui-monospace,monospace;color:var(--accent); }
#feature-dictation .feature-art,#feature-assistant .feature-art { grid-template-columns:1fr;gap:0; }
#feature-dictation .example-context,#feature-assistant .example-context { padding:28px 36px; }
#feature-dictation .example-context>p,#feature-assistant .example-context>p { font-size:20px;line-height:1.6;margin-top:12px; }
#feature-dictation .feature-native,#feature-assistant .feature-native { height:270px;margin:0 24px 24px; }
.action-count { align-items:center; }.action-count strong { grid-row:1; }
.keystroke-math { display:grid;gap:10px;grid-column:1/-1;margin-top:8px; }
.effort-step { display:flex;align-items:center;gap:10px; }.effort-step>span:last-child { margin-left:auto;font-size:12px;color:var(--muted); }.effort-step b { font:13px/1 ui-monospace,monospace;color:#d1d3d7; }
.effort-step kbd { display:inline-grid;place-items:center;min-width:31px;height:30px;padding:0 7px;border:1px solid #5a5c62;border-bottom-width:3px;border-radius:6px;background:linear-gradient(#34363b,#222328);font:13px/1 'Helvetica Neue',sans-serif;color:#e7e8ec; }
.key-pair { display:flex;gap:4px; }
[data-art=ocr] .example-context { position:relative;transform:none;border-radius:8px; }
.ocr-region { position:absolute;inset:-5px;border:1.5px solid var(--accent);pointer-events:none; }
.ocr-region i { position:absolute;width:6px;height:6px;background:white;border:1px solid var(--accent); }.ocr-region i:nth-child(1) { top:-4px;left:-4px; }.ocr-region i:nth-child(2) { top:-4px;right:-4px; }.ocr-region i:nth-child(3) { bottom:-4px;left:-4px; }.ocr-region i:nth-child(4) { bottom:-4px;right:-4px; }
.ocr-region svg { position:absolute;left:calc(100% - 1px);top:calc(100% - 1px);width:22px;height:28px;filter:drop-shadow(0 2px 2px #0005); }
.editor-viewport { background:transparent;border:0; }
@media(max-width:700px) { #feature-dictation .example-context,#feature-assistant .example-context { padding:24px; }#feature-dictation .example-context>p,#feature-assistant .example-context>p { font-size:17px; }#feature-dictation .feature-native,#feature-assistant .feature-native { height:170px;margin:0 8px 16px; }.effort-step>span:last-child { font-size:11px; } }

.history-access { display:grid;gap:18px;margin-top:28px; }.history-access>span { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted); }.history-access kbd { display:grid;place-items:center;width:28px;height:28px;background:#292b30;border:1px solid #55585e;border-bottom-width:3px;border-radius:5px;color:#e7e8ec; }.history-access svg { width:18px;height:18px;color:var(--accent); }

.enhancer-benefits { display:flex;flex-wrap:wrap;gap:9px;margin:-12px 0 30px; }.enhancer-benefits>span { padding:9px 14px;border:1px solid #a78bfa30;border-radius:999px;background:#a78bfa0a;color:#c9bafa;font-size:13px; }

/* Dictation anchors its compact instruction to the shared keyboard; visuals grow upward. */
.screen-frame[data-feature=dictation] .key-guide{display:none}
.screen-frame[data-feature=dictation] .cue-content{top:auto;bottom:calc(100% - var(--scene-top) + 6px);left:8%;right:8%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.screen-frame[data-feature=dictation] .cue-action{order:1;justify-content:center}
.screen-frame[data-feature=dictation] .cue-copy{text-align:center}
.screen-frame[data-feature=dictation] .cue-tool{position:static}
.screen-frame[data-feature=dictation] .cue-action>.dictation-key-hint{width:30px;height:30px;border-radius:5px;border:1px solid #5a5c62;border-bottom-width:2px;background:linear-gradient(#34363b,#222328);box-shadow:none;font-size:20px;transform:none;color:#e7e8ec}
.screen-frame[data-feature=dictation] .keystroke:is([data-gesture=hold],[data-gesture=press]) .dictation-key-hint{border-color:var(--accent);color:var(--accent)}
.screen-frame[data-feature=dictation] .cue-speech{width:100%;justify-content:center;margin-top:0}
.screen-frame[data-feature=dictation] .voice-visual{margin-inline:auto;max-width:350px}
.dictation-message{position:relative;width:min(650px,100%);padding:19px 25px;border:1px solid #ffffffb8;border-radius:20px 20px 20px 6px;background:linear-gradient(135deg,#ffffffed,#edf4ede0);backdrop-filter:blur(20px) saturate(.75);-webkit-backdrop-filter:blur(20px) saturate(.75);box-shadow:0 12px 28px #0002,inset 0 1px 0 #fff;text-align:left;opacity:var(--message-reveal,1);transform:translateY(calc((1 - var(--message-reveal,1))*12px)) scale(calc(.98 + var(--message-reveal,1)*.02));transform-origin:50% 100%}
.dictation-message::after{content:"";position:absolute;left:18px;bottom:-9px;width:17px;height:9px;background:#edf4ede8;clip-path:polygon(0 0,100% 0,0 100%)}
.dictation-message p{margin:0;color:#20342b;font-size:20px;line-height:1.45;font-weight:400;text-wrap:pretty}
.dictation-processing{display:flex;align-items:center;gap:9px;height:58px}
.dictation-processing i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dictation-thinking 1.2s ease-in-out infinite}
.dictation-processing i:nth-child(2){animation-delay:.16s}.dictation-processing i:nth-child(3){animation-delay:.32s}
@keyframes dictation-thinking{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
@media(min-width:701px) and (max-width:1000px){
 .screen-frame[data-feature=dictation] .cue-action>.dictation-key-hint{width:28px;height:28px;font-size:18px}
 .dictation-message{padding:16px 20px}.dictation-message p{font-size:18px}
}
@media(max-width:700px){
 .screen-frame[data-feature=dictation] .cue-action>.dictation-key-hint{width:26px;height:26px;font-size:18px}
 .screen-frame[data-feature=dictation] .cue-content{left:5%;right:5%;gap:12px}
 .screen-frame[data-feature=dictation] .voice-visual{max-width:260px}
 .dictation-message{padding:16px 18px;border-radius:15px 15px 15px 4px}
 .dictation-message p{font-size:16px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.dictation-processing i{animation:none}.dictation-message{transform:none;opacity:1}}