:root{--color-paper: #fbf4e6;--color-ink: #33261c;--color-ink-soft: #75614f;--color-line: #ead9bf;--color-tile: #ffffff;--color-accent: #2a9d8f;--color-accent-soft: #d6eeea;--color-on-accent: #ffffff;--color-alert: #a8452f;--color-tap-highlight: transparent;--font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;--font-size-small: .875rem;--font-size-body: 1rem;--font-size-action: 1.25rem;--font-size-tile-number: 1.25rem;--font-size-recording-title: 1.25rem;--font-size-app-title: 1.75rem;--font-size-back: 2rem;--font-weight-regular: 400;--font-weight-bold: 700;--line-height-body: 1.35;--line-height-tight: 1;--space-xxs: .125rem;--space-xs: .25rem;--space-s: .5rem;--space-m: .75rem;--space-l: 1rem;--space-xl: 1.5rem;--radius-action: 1rem;--radius-tile: 1rem;--radius-bar: 999px;--shadow-tile: 0 1px 2px rgb(51 38 28 / .08), 0 2px 8px rgb(51 38 28 / .06);--touch-min: 44px;--column-max: 40rem;--action-height: 4rem;--tile-min-width: 6rem;--waveform-height: 2.5rem;--tile-content-height: calc( var(--font-size-tile-number) * var(--line-height-tight) + var(--space-xs) + var(--waveform-height) );--waveform-gap: 1px;--bar-min-height: 3px;--line-width: 1px;--focus-width: 3px;--focus-offset: 2px;--tile-mark-width: 3px;--opacity-rejected: .4;--opacity-disabled: .35;--decision-height: 4.5rem;--context-height: 6rem;--position-width: 5.5rem;--handle-line-width: 3px;--color-region: rgb(42 157 143 / .14);--color-region-current: rgb(42 157 143 / .3);--color-region-rejected: rgb(51 38 28 / .08);--color-bar-outside: #cdbb9f;--shadow-action-bar: 0 -2px 8px rgb(51 38 28 / .08);--pulse-duration: .7s;--pulse-opacity: .45}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-family);font-size:var(--font-size-body);line-height:var(--line-height-body);-webkit-text-size-adjust:100%}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:var(--color-tap-highlight);touch-action:manipulation}:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}.screen{width:100%;max-width:var(--column-max);margin-inline:auto;padding:var(--space-xl) var(--space-l);display:flex;flex-direction:column;gap:var(--space-l)}.notice{margin:0;color:var(--color-ink-soft)}.notice--alert{color:var(--color-alert)}button:disabled{cursor:default;opacity:var(--opacity-disabled)}.primary-action,.secondary-action{min-height:var(--touch-min);padding:var(--space-s) var(--space-l);border-radius:var(--radius-action);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);text-align:center;text-decoration:none;-webkit-tap-highlight-color:var(--color-tap-highlight)}.primary-action{border:none;background:var(--color-accent);color:var(--color-on-accent)}.secondary-action{border:var(--line-width) solid var(--color-line);background:var(--color-tile);color:var(--color-ink)}.secondary-action[aria-pressed=true]{background:var(--color-accent-soft)}.quiet-button{min-height:var(--touch-min);margin-inline-start:auto;padding:0 var(--space-s);border:none;border-radius:var(--radius-action);background:none;color:var(--color-ink-soft);font-weight:var(--font-weight-bold)}.quiet-button--start{align-self:flex-start;margin-inline-start:0}.app-title{margin:0;font-size:var(--font-size-app-title);font-weight:var(--font-weight-bold)}.import-action{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--action-height);border-radius:var(--radius-action);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--font-size-action);font-weight:var(--font-weight-bold)}.import-action:has(:focus-visible){outline:var(--focus-width) solid var(--color-accent);outline-offset:var(--focus-offset)}.import-action__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:var(--color-tap-highlight)}.import-progress,.recording-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}.import-progress{gap:var(--space-s)}.import-item{display:flex;flex-direction:column;font-size:var(--font-size-small)}.import-item__name{overflow-wrap:anywhere}.import-item__state{color:var(--color-ink-soft);font-weight:var(--font-weight-bold)}.import-item[data-status=working] .import-item__state,.import-item[data-status=imported] .import-item__state{color:var(--color-ink)}.import-item[data-status=unreadable] .import-item__state,.import-item[data-status=quota] .import-item__state,.import-item[data-status=storage] .import-item__state{color:var(--color-alert)}.recording-list>li+li{border-top:var(--line-width) solid var(--color-line)}.recording-row{min-height:var(--touch-min);padding-block:var(--space-m);display:flex;flex-direction:column;gap:var(--space-xxs);color:inherit;text-decoration:none;-webkit-tap-highlight-color:var(--color-tap-highlight)}.recording-row__date{font-weight:var(--font-weight-bold)}.recording-row__summary{color:var(--color-ink-soft);font-size:var(--font-size-small)}.recording-header{display:flex;align-items:center;gap:var(--space-s)}.back-button{flex:none;width:var(--touch-min);height:var(--touch-min);padding:0;border:none;border-radius:var(--radius-action);background:none;font-size:var(--font-size-back);line-height:var(--line-height-tight)}.recording-title{margin:0;min-width:0;font-size:var(--font-size-recording-title);font-weight:var(--font-weight-bold)}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min-width),1fr));gap:var(--space-s)}.sound-grid:empty{display:none}.sound-tile{min-width:0;min-height:var(--touch-min);padding:var(--space-s);border:none;border-radius:var(--radius-tile);background:var(--color-tile);box-shadow:var(--shadow-tile);display:flex;flex-direction:column;gap:var(--space-xs);content-visibility:auto;contain-intrinsic-block-size:auto var(--tile-content-height);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sound-tile__number{font-size:var(--font-size-tile-number);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);text-align:start}.sound-tile[data-state=loading]{background:var(--color-accent-soft);animation:sound-tile-pulse var(--pulse-duration) ease-in-out infinite alternate}.sound-tile[data-state=playing]{background:var(--color-accent);color:var(--color-on-accent)}.sound-tile[data-state=failed]{color:var(--color-alert)}@keyframes sound-tile-pulse{to{opacity:var(--pulse-opacity)}}@media(prefers-reduced-motion:reduce){.sound-tile[data-state=loading]{animation:none}}.delete-action{margin-top:var(--space-xl);display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;column-gap:var(--space-xs);color:var(--color-ink-soft);font-size:var(--font-size-small)}.delete-action .notice{width:100%;text-align:end}.delete-action__button{min-height:var(--touch-min);padding:0 var(--space-s);border:none;border-radius:var(--radius-action);background:none;color:var(--color-ink-soft)}.delete-action__button--confirm{color:var(--color-alert);font-weight:var(--font-weight-bold)}.waveform{height:var(--waveform-height);display:flex;align-items:center;gap:var(--waveform-gap)}.waveform__bar{flex:1;min-width:0;min-height:var(--bar-min-height);border-radius:var(--radius-bar);background:var(--color-accent)}.sound-tile[data-state=playing] .waveform__bar,.sound-tile[data-state=failed] .waveform__bar{background:currentColor}.recording-actions{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-s)}.recording-actions .primary-action{min-height:var(--action-height);font-size:var(--font-size-action)}.sound-tile[data-decision=kept]{box-shadow:var(--shadow-tile),inset 0 0 0 var(--tile-mark-width) var(--color-accent)}.sound-tile[data-decision=rejected]{opacity:var(--opacity-rejected)}.sound-tile[data-selected=true]{outline:var(--tile-mark-width) solid var(--color-ink);outline-offset:var(--focus-offset)}.action-bar{position:sticky;bottom:0;margin-inline:calc(-1 * var(--space-l));padding:var(--space-s) var(--space-l);display:flex;flex-wrap:wrap;gap:var(--space-s);background:var(--color-paper);box-shadow:var(--shadow-action-bar)}.action-bar__button{flex:1;min-height:var(--action-height);padding:0 var(--space-s);border:var(--line-width) solid var(--color-line);border-radius:var(--radius-action);background:var(--color-tile);color:var(--color-ink);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);text-decoration:none}.action-bar__button--keep{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.sorting-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-s)}.sorting-nav{display:flex;align-items:center;justify-content:center}.sorting-nav__step{width:var(--touch-min);height:var(--touch-min);padding:0;border:none;border-radius:var(--radius-action);background:none;font-size:var(--font-size-action);line-height:var(--line-height-tight)}.sorting-position{margin:0;min-width:var(--position-width);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;text-align:center}.context{position:relative;height:var(--context-height);border-radius:var(--radius-tile);background:var(--color-tile);box-shadow:var(--shadow-tile);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.context__bars{position:absolute;top:0;right:0;bottom:0;left:0;padding-inline:var(--space-xxs);display:flex;align-items:center;gap:var(--waveform-gap);pointer-events:none}.context__bar{flex:1;min-width:0;min-height:var(--bar-min-height);border-radius:var(--radius-bar);background:var(--color-bar-outside)}.context__region{position:absolute;top:0;bottom:0;padding:0;border:none;border-radius:var(--radius-tile);background:var(--color-region);-webkit-tap-highlight-color:var(--color-tap-highlight)}.context__region[data-current=true]{background:var(--color-region-current)}.context__region[data-decision=rejected]{background:var(--color-region-rejected)}.context__handle{position:absolute;top:0;bottom:0;z-index:1;width:var(--touch-min);padding:0;border:none;background:none;transform:translate(-50%);touch-action:none;-webkit-tap-highlight-color:var(--color-tap-highlight)}.context__handle:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--handle-line-width);border-radius:var(--radius-bar);background:var(--color-accent);transform:translate(-50%)}.context__handle[data-dragging=true]:after{background:var(--color-ink)}.context__handle:disabled{opacity:1}.context__handle:disabled:after{background:var(--color-line)}.play-action{min-height:var(--action-height);border:none;border-radius:var(--radius-action);background:var(--color-accent-soft);color:var(--color-ink);font-size:var(--font-size-action);font-weight:var(--font-weight-bold)}.play-action[data-state=loading]{animation:sound-tile-pulse var(--pulse-duration) ease-in-out infinite alternate}.play-action[data-state=playing]{background:var(--color-accent);color:var(--color-on-accent)}@media(prefers-reduced-motion:reduce){.play-action[data-state=loading]{animation:none}}.sorting-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-s);font-size:var(--font-size-small)}.sorting-tools .secondary-action{padding-inline:var(--space-xs);font-weight:var(--font-weight-regular)}.decision-bar{position:sticky;bottom:0;margin-inline:calc(-1 * var(--space-l));margin-top:auto;padding:var(--space-s) var(--space-l);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-s);background:var(--color-paper)}.decision-button{min-height:var(--decision-height);border-radius:var(--radius-action);font-size:var(--font-size-action);font-weight:var(--font-weight-bold)}.decision-button--reject{border:var(--tile-mark-width) solid var(--color-alert);background:var(--color-tile);color:var(--color-alert)}.decision-button--reject[aria-pressed=true]{background:var(--color-alert);color:var(--color-on-accent)}.decision-button--keep{border:var(--tile-mark-width) solid var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.decision-button--keep[aria-pressed=true]{box-shadow:inset 0 0 0 var(--tile-mark-width) var(--color-on-accent)}.sorting-screen{min-height:100dvh}.sorted-title{margin:0;font-size:var(--font-size-app-title);font-weight:var(--font-weight-bold)}.sorted-summary{margin:0;color:var(--color-ink-soft);font-size:var(--font-size-action)}