@drawcall/feedback 0.0.0-stage → 0.1.0

package/dist/browser/session.js

@@ -0,0 +1,101 @@
+import { LIMITS } from "../service.js";
+import { describeDevice } from "./device.js";
+import { finishSession, joinReviewers, seeSession, startSession, storeAnswers } from "./server.js";
+/**
+ * The tester's playtest on this page load, as the service records it: started once, when the tester starts, seen again
+ * each time the page is hidden or closed, and finished when the game calls `finish()`. Its items point at it, so the
+ * owner sees who played which version, for how long, whether to the end, and what they said along the way.
+ */
+export class Session {
+    id = crypto.randomUUID();
+    /** Rejects when the service never got the session, which is logged here. */
+    #started;
+    #options;
+    #tester;
+    #signal;
+    /** Starts the session, retried since every item points at it. Playing through one's own reviewer link enlists. */
+    constructor(options, tester, version, signal) {
+        this.#options = options;
+        this.#tester = tester;
+        this.#signal = signal;
+        const { name, contact, reviewer } = tester;
+        const start = { id: this.id, project: options.project, tester: name, contact, version, url: location.href, device: device(), reviewer, minutes: options.minutes ?? null };
+        this.#started = startSession(start, signal).then(id => {
+            if (id)
+                tester.enlist(id);
+        });
+        this.#started.catch(error => {
+            if (!signal.aborted)
+                console.error("feedback: could not start the session", error);
+        });
+        document.addEventListener("visibilitychange", () => {
+            if (document.hidden)
+                this.#after(seeSession, "mark the session seen");
+        }, { signal });
+    }
+    finish() {
+        this.#after(finishSession, "finish the session");
+    }
+    /** Stores the closing screen's answers with the session. Rejects when they can't be, also when it never started. */
+    async answer(answers) {
+        await this.#started;
+        await storeAnswers(this.id, answers, this.#signal);
+    }
+    /** Joins the tester to the project's reviewers with `email`, from the closing screen. Rejects like `answer`. */
+    async join(email) {
+        await this.#started;
+        await joinReviewers(this.id, email, this.#signal);
+        this.#tester.leave(email);
+    }
+    /** An item of this session, from what the tester said or typed, in `xr` when given in an XR session. */
+    item({ xr = null, state = null, text, overall }) {
+        const { name, contact } = this.#tester;
+        return {
+            id: crypto.randomUUID(),
+            project: this.#options.project,
+            session: this.id,
+            tester: name,
+            contact,
+            url: location.href,
+            device: device(),
+            // XRSession doesn't expose its mode; an opaque blend is VR, anything see-through is AR.
+            xr: xr && (xr.environmentBlendMode === "opaque" ? "immersive-vr" : "immersive-ar"),
+            state,
+            ...(overall && { overall }),
+            ...(text && { text }),
+        };
+    }
+    /**
+     * Calls the game's `pause()` and returns its state as plain JSON within the size cap: the round trip applies toJSON
+     * and drops undefined and functions. Null when it threw, returned nothing JSON can hold, or too much; all logged.
+     */
+    pause() {
+        let value;
+        let text;
+        try {
+            value = this.#options.pause?.();
+            text = JSON.stringify(value);
+        }
+        catch (error) {
+            console.error("feedback: pause() threw or returned something JSON.stringify can't handle, so no state is sent", error);
+            return null;
+        }
+        if (text === undefined) {
+            if (value !== undefined)
+                console.warn("feedback: pause() returned something that isn't JSON, so no state is sent");
+            return null;
+        }
+        const bytes = new TextEncoder().encode(text).length;
+        if (bytes <= LIMITS.state)
+            return JSON.parse(text);
+        console.warn(`feedback: pause() returned ${bytes} bytes of state, over the ${LIMITS.state} byte cap, so none is sent`);
+        return null;
+    }
+    /** Sends once the session started; a session that never started has nothing to send, and its failure is logged. */
+    #after(request, what) {
+        this.#started.then(() => request(this.id).catch(error => console.error(`feedback: could not ${what}`, error)), () => { });
+    }
+}
+function device() {
+    return describeDevice(navigator.userAgent);
+}

package/dist/browser/sounds.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Where a clip's words name the feedback key, which they say as its place on the keyboard. A heading shows the key's
+ * cap, and at `PLACED`, its first mention, also where it is: the cap alone reads as Ctrl or Shift+6 to many.
+ */
+export declare const KEY = "{key}";
+export declare const PLACED = "{key, left of 1}";
+/** Where the feedback key is, the same on every layout. */
+export declare const PLACE = "the key left of\u00A01";
+/**
+ * Voice clips and the words each one says, kept together so `pnpm clips` can regenerate a clip whose words change:
+ * what every device hears in a turn and on the last page, the hint heard the first time each XR input is used, and the
+ * walkthrough's narration, one per step and input, whose words are also its headings. English in v1. A controller's
+ * gesture is spelled out: few people know the thumbstick is also a button.
+ */
+export declare const CLIPS: {
+    "hold-controller": {
+        url: URL;
+        words: string;
+    };
+    "hold-hand": {
+        url: URL;
+        words: string;
+    };
+    show: {
+        url: URL;
+        words: string;
+    };
+    "show-controller": {
+        url: URL;
+        words: string;
+    };
+    "show-hand": {
+        url: URL;
+        words: string;
+    };
+    "speak-controller": {
+        url: URL;
+        words: string;
+    };
+    "speak-hand": {
+        url: URL;
+        words: string;
+    };
+    sending: {
+        url: URL;
+        words: string;
+    };
+    unheard: {
+        url: URL;
+        words: string;
+    };
+    failed: {
+        url: URL;
+        words: string;
+    };
+    nomic: {
+        url: URL;
+        words: string;
+    };
+    thanks: {
+        url: URL;
+        words: string;
+    };
+    end: {
+        url: URL;
+        words: string;
+    };
+    "a-welcome": {
+        url: URL;
+        words: string;
+    };
+    "b-key": {
+        url: URL;
+        words: string;
+    };
+    "b-touch": {
+        url: URL;
+        words: string;
+    };
+    "b-controller": {
+        url: URL;
+        words: string;
+    };
+    "b-hand": {
+        url: URL;
+        words: string;
+    };
+    "b-type-key": {
+        url: URL;
+        words: string;
+    };
+    "b-type-touch": {
+        url: URL;
+        words: string;
+    };
+    "c-key": {
+        url: URL;
+        words: string;
+    };
+    "c-touch": {
+        url: URL;
+        words: string;
+    };
+    "c-quest": {
+        url: URL;
+        words: string;
+    };
+    "d-key": {
+        url: URL;
+        words: string;
+    };
+    "d-touch": {
+        url: URL;
+        words: string;
+    };
+    "d-quest": {
+        url: URL;
+        words: string;
+    };
+};
+export type Clip = keyof typeof CLIPS;
+/** The words as said aloud. */
+export declare function spoken(words: string): string;
+/** Tones as [frequency, delay, duration, volume, wave]. */
+type Tone = [number, number, number, number?, OscillatorType?];
+declare const TONES: Record<"start" | "tick" | "nothing" | "failed", Tone[]>;
+/** Tones and voice clips, on one AudioContext that the microphone meter shares. */
+export declare class Sounds {
+    #private;
+    readonly context: AudioContext;
+    constructor(signal: AbortSignal);
+    play(name: keyof typeof TONES): void;
+    /** Rises with a hold's progress. */
+    hold(progress: number): void;
+    /** Plays a clip without waiting for it; one that fails is logged. */
+    say(name: Clip): void;
+    /** Plays a clip and resolves once it has ended; aborting `signal` cuts it off. */
+    clip(name: Clip, signal?: AbortSignal): Promise<void>;
+}
+export {};

package/dist/browser/sounds.js

@@ -0,0 +1,118 @@
+/** What the tool asks for when feedback is about something on screen. */
+const SHOW = "If it's on screen, you'll be asked to show it.";
+/**
+ * Where a clip's words name the feedback key, which they say as its place on the keyboard. A heading shows the key's
+ * cap, and at `PLACED`, its first mention, also where it is: the cap alone reads as Ctrl or Shift+6 to many.
+ */
+export const KEY = "{key}";
+export const PLACED = "{key, left of 1}";
+/** Where the feedback key is, the same on every layout. */
+export const PLACE = "the key left of 1";
+// Each URL is spelled out in full, which is what lets bundlers find the file.
+const clip = (url, words) => ({ url, words });
+/**
+ * Voice clips and the words each one says, kept together so `pnpm clips` can regenerate a clip whose words change:
+ * what every device hears in a turn and on the last page, the hint heard the first time each XR input is used, and the
+ * walkthrough's narration, one per step and input, whose words are also its headings. English in v1. A controller's
+ * gesture is spelled out: few people know the thumbstick is also a button.
+ */
+export const CLIPS = {
+    "hold-controller": clip(new URL("./sounds/hold-controller.m4a", import.meta.url), "To give feedback with your left controller, press the thumbstick straight down until it clicks, and pull the trigger under your index finger at the same time. Hold both for a second."),
+    "hold-hand": clip(new URL("./sounds/hold-hand.m4a", import.meta.url), "To give feedback with your hands, pinch thumb and index finger on both hands, and touch the two pinches together. Hold for a second."),
+    show: clip(new URL("./sounds/show.m4a", import.meta.url), "Make sure it's in view, then press again."),
+    "show-controller": clip(new URL("./sounds/show-controller.m4a", import.meta.url), "Make sure it's in view, then click the thumbstick and trigger together again."),
+    "show-hand": clip(new URL("./sounds/show-hand.m4a", import.meta.url), "Make sure it's in view, then touch your two pinches together again."),
+    "speak-controller": clip(new URL("./sounds/speak-controller.m4a", import.meta.url), "After the tone, describe what you noticed. To send, click the thumbstick and trigger together again."),
+    "speak-hand": clip(new URL("./sounds/speak-hand.m4a", import.meta.url), "After the tone, describe what you noticed. To send, touch your pinches together again."),
+    sending: clip(new URL("./sounds/sending.m4a", import.meta.url), "Got it. Sending, one moment."),
+    unheard: clip(new URL("./sounds/unheard.m4a", import.meta.url), "Didn't catch that, so nothing was sent. Try again anytime."),
+    failed: clip(new URL("./sounds/failed.m4a", import.meta.url), "Your feedback couldn't be sent. Try again in a moment."),
+    nomic: clip(new URL("./sounds/nomic.m4a", import.meta.url), "The mic is off, so nothing was recorded. Allow the mic for this site, and for the browser in the headset's privacy settings."),
+    thanks: clip(new URL("./sounds/thanks.m4a", import.meta.url), "Sent, thanks!"),
+    end: clip(new URL("./sounds/end.m4a", import.meta.url), "Thanks for taking part. You can close this tab now."),
+    "a-welcome": clip(new URL("./sounds/walkthrough/a-welcome.m4a", import.meta.url), "You're about to test the experience. Whenever something in it feels off, report it. Each report is sent, with a screenshot when it's about something you can see. Here's how."),
+    "b-key": clip(new URL("./sounds/walkthrough/b-key.m4a", import.meta.url), `Press ${PLACED} and describe what you noticed. Then press ${KEY} to send.`),
+    "b-touch": clip(new URL("./sounds/walkthrough/b-touch.m4a", import.meta.url), "Tap Feedback and describe what you noticed. Then tap Send."),
+    "b-controller": clip(new URL("./sounds/walkthrough/b-controller.m4a", import.meta.url), "With controllers, use the left one. Press the thumbstick straight down until it clicks, it's also a button, and pull the trigger under your index finger at the same time. Hold both for a second, then describe what you noticed. To send, click both together again."),
+    "b-hand": clip(new URL("./sounds/walkthrough/b-hand.m4a", import.meta.url), "With your hands, pinch thumb and index finger on both hands, and touch the two pinches together. Hold for a second, then describe what you noticed. To send, touch them together again."),
+    "b-type-key": clip(new URL("./sounds/walkthrough/b-type-key.m4a", import.meta.url), `Press ${PLACED}, type what you noticed and press Enter.`),
+    "b-type-touch": clip(new URL("./sounds/walkthrough/b-type-touch.m4a", import.meta.url), "Tap Feedback, type what you noticed and tap Send."),
+    "c-key": clip(new URL("./sounds/walkthrough/c-key.m4a", import.meta.url), `${SHOW} Your next press takes a screenshot.`),
+    "c-touch": clip(new URL("./sounds/walkthrough/c-touch.m4a", import.meta.url), `${SHOW} Your next tap takes a screenshot.`),
+    "c-quest": clip(new URL("./sounds/walkthrough/c-quest.m4a", import.meta.url), `${SHOW} Look at it, then click both again, or touch your pinches together again, to take a screenshot.`),
+    "d-key": clip(new URL("./sounds/walkthrough/d-key.m4a", import.meta.url), `You're ready. Press ${KEY} to close this and start.`),
+    "d-touch": clip(new URL("./sounds/walkthrough/d-touch.m4a", import.meta.url), "You're ready. Tap Feedback to close this and start."),
+    "d-quest": clip(new URL("./sounds/walkthrough/d-quest.m4a", import.meta.url), "You're ready. Enter the experience to start."),
+};
+/** The words as said aloud. */
+export function spoken(words) {
+    return words.replaceAll(PLACED, KEY).replaceAll(KEY, PLACE);
+}
+const TONES = {
+    start: [[880, 0, 0.12]],
+    /** The seconds before a recording stops itself. */
+    tick: [[1200, 0, 0.03, 0.08]],
+    nothing: [[660, 0, 0.15], [440, 0.15, 0.25]],
+    failed: [[180, 0, 0.4, 0.25, "triangle"]],
+};
+/** Tones and voice clips, on one AudioContext that the microphone meter shares. */
+export class Sounds {
+    context = new AudioContext();
+    #clips = new Map();
+    constructor(signal) {
+        // Browsers keep a new context suspended until a user activation, which pointerdown doesn't count as.
+        const wake = () => void this.context.resume();
+        for (const type of ["pointerup", "click", "touchend", "keydown"])
+            addEventListener(type, wake, { signal, capture: true });
+        signal.addEventListener("abort", () => void this.context.close(), { once: true });
+    }
+    play(name) {
+        for (const tone of TONES[name])
+            this.#tone(...tone);
+    }
+    /** Rises with a hold's progress. */
+    hold(progress) {
+        this.#tone(300 + 600 * progress, 0, 0.05, 0.08);
+    }
+    /** Plays a clip without waiting for it; one that fails is logged. */
+    say(name) {
+        this.clip(name).catch(error => console.error(`feedback: could not play "${CLIPS[name].words}"`, error));
+    }
+    /** Plays a clip and resolves once it has ended; aborting `signal` cuts it off. */
+    async clip(name, signal) {
+        let buffer = this.#clips.get(name);
+        if (!buffer) {
+            // A failed load leaves the cache, so the next play tries again.
+            buffer = load(this.context, CLIPS[name].url).catch(error => {
+                this.#clips.delete(name);
+                throw error;
+            });
+            this.#clips.set(name, buffer);
+        }
+        const source = new AudioBufferSourceNode(this.context, { buffer: await buffer });
+        if (signal?.aborted)
+            return;
+        source.connect(this.context.destination);
+        const ended = new Promise(resolve => source.addEventListener("ended", resolve, { once: true }));
+        source.start();
+        signal?.addEventListener("abort", () => source.stop(), { once: true });
+        await ended;
+    }
+    #tone(frequency, delay, duration, volume = 0.2, type = "sine") {
+        const at = this.context.currentTime + delay;
+        const oscillator = new OscillatorNode(this.context, { frequency, type });
+        const gain = new GainNode(this.context, { gain: 0 });
+        gain.gain.setValueAtTime(0, at);
+        gain.gain.linearRampToValueAtTime(volume, at + 0.01);
+        gain.gain.exponentialRampToValueAtTime(0.001, at + duration);
+        oscillator.connect(gain).connect(this.context.destination);
+        oscillator.start(at);
+        oscillator.stop(at + duration + 0.02);
+    }
+}
+async function load(context, url) {
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`feedback: could not load ${url} (${response.status})`);
+    return context.decodeAudioData(await response.arrayBuffer());
+}

package/dist/browser/style.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from "../index.ts";
+/** Sets the game's `theme` on the shadow host, whose own style outranks the `:host` defaults. */
+export declare function paint(host: HTMLElement, theme?: Theme): void;
+/**
+ * Everything the SDK shows, kept flat: surfaces told apart by fill alone, one radius, one accent, and red only for
+ * recording. Dark by default; every quieter shade is mixed from `--text`, so any theme keeps its contrast steps. Three
+ * layers: the cover (the intro's and the closing screen's page), feedback mode over the game (a frame, a caption and
+ * the typing sheet), and the corner button on top.
+ */
+export declare const STYLE = "\n:host { all: initial;\n  --font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif; --mono: ui-monospace, \"SF Mono\", Menlo, monospace;\n  --text: #f5f5f7; --background: #121214; --glass: rgba(24, 24, 26, 0.92); --radius: 8px;\n  --accent: #fff; --on-accent: #111113; --record: #ff453a;\n  --muted: color-mix(in srgb, var(--text) 62%, transparent); --faint: color-mix(in srgb, var(--text) 50%, transparent);\n  --fill: color-mix(in srgb, var(--text) 8%, transparent); --raised: color-mix(in srgb, var(--text) 14%, transparent);\n  --ease: cubic-bezier(0.2, 0.8, 0.2, 1); }\n* { box-sizing: border-box; }\n[hidden] { display: none !important; }\np { margin: 0; }\n:focus { outline: none; }\n:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\nh1:focus-visible { outline: none; }\nkbd { display: inline-block; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; margin: 0 0.1em; border-radius: 4px;\n  background: var(--raised); vertical-align: 0.05em; font: 500 0.85em/1.5em var(--mono); text-align: center; color: var(--text); }\nh1 kbd, .lines kbd { font-size: 0.65em; vertical-align: 0.2em; }\ninput, textarea { display: block; width: 100%; margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius);\n  background: var(--fill); color: var(--text); font: 400 16px/24px var(--font); }\ninput { height: 48px; }\ntextarea { padding: 12px; resize: none; }\ninput:focus-visible, textarea:focus-visible { outline: 1.5px solid var(--muted); outline-offset: -1.5px; }\n::placeholder { color: var(--faint); }\nbutton { border: 0; font: 500 16px var(--font); color: var(--text); cursor: pointer; }\nbutton:disabled { opacity: 0.6; cursor: default; }\n.primary { height: 48px; padding: 0 28px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; }\n.secondary { height: 48px; padding: 0 20px; border-radius: var(--radius); background: var(--fill); }\n.secondary:hover { background: var(--raised); }\n/* A quiet text button; on Quest the one control on the cover its clicks reach. */\n.quiet { padding: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline;\n  text-underline-offset: 3px; pointer-events: auto; }\n.quiet:hover { color: var(--text); }\n.dot { display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.35em; border-radius: 50%; background: var(--record);\n  vertical-align: 0.12em; animation: pulse 1.6s ease-in-out infinite; }\n@keyframes pulse { 50% { opacity: 0.55; } }\n@keyframes fade { from { opacity: 0; } }\n@keyframes slide { from { translate: -100%; } to { translate: 250%; } }\n@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }\n\n/* The cover: one calm, opaque page with a wide centred column of large type, while the game renders behind it. */\n.cover { position: fixed; inset: 0; z-index: 2147483646; display: flex; overflow-y: auto; overscroll-behavior: contain;\n  padding: max(48px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom))\n    max(24px, env(safe-area-inset-left));\n  background: var(--background); font: 400 16px/24px var(--font); color: var(--text); -webkit-font-smoothing: antialiased;\n  animation: fade 200ms var(--ease); }\n/* On Quest, clicks reach the game's Enter VR button, and its last step lets the game show through, dimmed. */\n.cover.through { pointer-events: none; }\n.cover.clear { background: color-mix(in srgb, var(--background) 72%, transparent); }\n.card { width: 100%; max-width: 680px; margin: auto; }\n.logo { display: block; max-width: 200px; max-height: 40px; margin-bottom: 32px; object-fit: contain; object-position: left; }\nh1 { margin: 0; font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }\nh2 { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }\n.lead { margin-top: 24px; font-size: 20px; line-height: 28px; text-wrap: pretty; }\n.meta { margin-top: 8px; color: var(--muted); }\n.brief, form { margin-top: 32px; }\n.cover .primary { min-width: 240px; }\nfieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }\nlegend { float: left; width: 100%; padding: 0; }\nlabel { display: grid; gap: 6px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--muted); }\n.hint { grid-column: 1 / -1; margin: -12px 0 4px; }\nform > .quiet { display: block; margin-top: 16px; }\n.fine { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--faint); text-wrap: pretty; }\n.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }\n/* A link to open on another device, in full so it can be read off and typed. */\n.url { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 8px 8px 8px 16px; border-radius: var(--radius);\n  background: var(--fill); }\n.url .secondary { flex: none; height: 40px; }\n.url code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 400 14px/20px var(--mono); user-select: all; }\n\n/* The walkthrough: one miniature of the screen per step, the same size on every step, so the controls stay put. */\n.walk { display: grid; grid-template-rows: auto auto minmax(124px, auto) auto; gap: 24px; }\n.walk h1 { font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }\n.progress, .controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px;\n  line-height: 20px; color: var(--muted); }\n.controls { justify-content: start; font-size: 16px; }\n.example { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }\n.note { margin-top: 8px; color: var(--muted); }\n.screen { position: relative; overflow: hidden; height: 168px; border-radius: var(--radius); background: var(--fill); }\n.screen.short { height: 84px; }\n.screen.framed { outline: 2px solid var(--faint); outline-offset: -2px; }\n.screen .lines { position: absolute; top: 16px; left: 50%; width: max-content; max-width: 160%; transform: translateX(-50%) scale(0.58);\n  transform-origin: top center; }\n.screen .lines p + p { font-size: 19px; }\n.screen .dock { position: absolute; right: 20px; bottom: 20px; transform: scale(1.5); transform-origin: bottom right; }\n.screen .sheet { position: absolute; inset: 16px 20%; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 8px;\n  border-radius: var(--radius); background: var(--background); font: 400 11px/16px var(--font); color: var(--muted); }\n.screen .sheet div { display: flex; justify-content: space-between; }\n.screen .sheet b { font-size: 12px; color: var(--text); }\n.screen .sheet i { padding: 0 8px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-style: normal; }\n.screen .sheet span { border-radius: 4px; background: var(--fill); }\n.screen .keys ~ .sheet { left: 188px; right: 20px; }\n.keys { position: absolute; top: 20px; left: 20px; }\n.keys svg { display: block; height: 96px; }\n.keys rect { fill: var(--raised); }\n.keys text { fill: var(--muted); font: 500 10px var(--font); text-anchor: middle; }\n.keys .lit rect { fill: var(--accent); }\n.keys .lit text { fill: var(--on-accent); font: 600 13px var(--mono); }\n.screen.hands { display: flex; align-items: center; justify-content: center; gap: 32px; }\n.screen.hands img { height: 136px; }\n\n/* The closing screen: the game's questions, where a slider shows no value until touched, and the last word. */\n.questions { display: grid; gap: 28px; margin-bottom: 28px; }\n.question { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }\n.ask { display: flex; justify-content: space-between; gap: 16px; padding: 0; font-size: 16px; line-height: 24px; font-weight: 500;\n  color: var(--text); }\n.value { color: var(--accent); font-variant-numeric: tabular-nums; }\ninput[type=\"range\"] { height: 32px; padding: 0; background: none; accent-color: var(--accent); }\ninput[type=\"range\"].unset { opacity: 0.5; }\n.ends, .options { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 14px; color: var(--muted); }\n.options { justify-content: start; gap: 8px; }\n.option { position: relative; display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--radius);\n  background: var(--fill); color: var(--text); font-size: 16px; cursor: pointer; }\n.option:has(:checked) { background: var(--accent); color: var(--on-accent); }\n.option:has(:focus-visible) { outline: 1.5px solid var(--muted); outline-offset: 2px; }\n.option input { position: absolute; inset: 0; height: 100%; opacity: 0; pointer-events: none; }\n.reply { border-radius: var(--radius); background: var(--fill); }\n.reply textarea { min-height: 112px; background: none; resize: vertical; }\n.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 112px; padding: 12px 16px;\n  font-variant-numeric: tabular-nums; }\n.voice > span { flex: 1; }\n.voice .secondary, .reply .record { height: 40px; background: var(--raised); }\n.reply .record { margin: 0 8px 8px auto; border-radius: var(--radius); display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 14px; }\n.join { margin-top: 28px; max-width: 360px; }\n.status { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }\n\n/* Feedback mode: a frame round the viewport, light with a thin dark line inside to show over any scene, and a caption. */\n.mode { position: fixed; inset: 0; z-index: 2147483646; display: flex; flex-direction: column; align-items: center; gap: 8px;\n  padding: max(40px, env(safe-area-inset-top)) 48px 0; pointer-events: none; text-align: center; font: 400 16px/24px var(--font); color: var(--text);\n  transition: opacity 300ms var(--ease); animation: fade 180ms var(--ease); }\n.mode::before { content: \"\"; position: absolute; inset: 0; z-index: 1; border: 3px solid rgba(255, 255, 255, 0.85);\n  outline: 2px solid rgba(0, 0, 0, 0.6); outline-offset: -5px; }\n.mode.leaving { opacity: 0; }\n.lines { display: grid; justify-items: center; gap: 4px; max-width: 100%; padding: 12px 20px; border-radius: var(--radius);\n  background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); text-align: center; }\n.lines p:first-child { max-width: 800px; font: 600 28px/36px var(--font); letter-spacing: -0.01em; text-wrap: pretty; }\n.lines p + p { font: 400 16px/24px var(--font); color: var(--muted); }\n.tick { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.lines p:first-child .tick { font-weight: 400; color: var(--muted); }\n.bar { position: relative; overflow: hidden; width: 120px; height: 3px; margin: 8px 0 4px; border-radius: 2px;\n  background: color-mix(in srgb, var(--text) 20%, transparent); }\n.bar::after { content: \"\"; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--text);\n  animation: slide 1.4s ease-in-out infinite; }\n.mode > .quiet { padding: 4px 8px; color: var(--text); font: 500 14px/20px var(--font); }\n/* The typing sheet: a card with a large field over the dimmed, paused game; it has the caption's words. */\n.mode:has(.sheet) > :not(.sheet) { display: none; }\n.sheet { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;\n  background: color-mix(in srgb, var(--background) 60%, transparent); pointer-events: auto; text-align: left; }\n.mode .sheet > div { display: grid; gap: 12px; width: 100%; max-width: 640px; padding: 16px; border-radius: calc(var(--radius) * 1.5);\n  background: var(--background); }\n.head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }\n.head h2 { margin: 0; font: 600 18px/24px var(--font); color: var(--text); }\n.head .quiet { justify-self: start; text-decoration: none; }\n.head .primary { justify-self: end; height: 40px; padding: 0 20px; }\n.sheet textarea { min-height: 40vh; }\n.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font: 400 14px/20px var(--font); color: var(--muted); }\n/* A phone's sheet is edge to edge over the space the on-screen keyboard leaves. */\n.sheet.phone { bottom: auto; height: 100%; padding: 0; align-items: stretch; }\n.mode .sheet.phone > div { max-width: none; grid-template-rows: auto 1fr auto; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 16px 12px; }\n.sheet.phone textarea { min-height: 0; height: 100%; }\n\n/* The corner button, 16 px from the edges, over everything. */\n.dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483647; }\n.corner { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 10px;\n  border-radius: var(--radius); background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);\n  font: 500 14px var(--font); white-space: nowrap; transition: transform 120ms var(--ease), background-color 120ms var(--ease); }\n.corner.touch { height: 48px; padding: 0 16px 0 12px; }\n.corner svg { flex: none; width: 20px; height: 20px; }\n.corner kbd { margin: 0 0 0 2px; }\n.corner:hover { background: color-mix(in srgb, var(--glass), var(--text) 8%); }\n.corner:active { transform: scale(0.96); }\n/* Over the cover's backdrop the glass would vanish; the walkthrough's last step lights it. */\n.corner.raised { background: var(--raised); }\n.corner.lit, .corner.lit:hover { background: var(--accent); color: var(--on-accent); }\n.corner.lit kbd { background: color-mix(in srgb, var(--on-accent) 10%, transparent); color: var(--on-accent); }\n.corner[aria-disabled=\"true\"] > * { opacity: 0.35; }\n.corner[aria-label=\"Send recording\"] svg { animation: pulse 1.6s ease-in-out infinite; }\n/* A hold fills the button from the left. */\n.corner::before { content: \"\"; position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 20%, transparent);\n  transform-origin: left; transform: scaleX(var(--hold, 0)); pointer-events: none; }\n\n/* A phone gets the same pages in one column, with room at the bottom for the corner button. */\n@media (max-width: 560px) {\n  .cover { padding: max(32px, env(safe-area-inset-top)) 20px calc(max(16px, env(safe-area-inset-bottom)) + 72px); }\n  h1 { font-size: 28px; line-height: 36px; }\n  .walk h1, .lines p:first-child { font-size: 24px; line-height: 32px; }\n  .cover .primary { width: 100%; }\n  fieldset { grid-template-columns: 1fr; }\n  .walk { grid-template-rows: auto auto minmax(160px, auto) auto; }\n  .screen { height: 156px; }\n  .screen .dock { right: 12px; bottom: 12px; transform: scale(1.25); }\n  .mode { padding: max(64px, env(safe-area-inset-top)) 24px 0; }\n}\n";