:root {
  color-scheme: light;
  --page: #f4f4f0; --surface: #fff; --ink: #10100f; --ink-soft: #62625e;
  --accent: #ee5a24; --accent-strong: #cc4112; --border: #d4d4ce; --border-strong: #989892;
  --motion-draw: 1550ms; --motion-rights-at: 2100ms; --motion-complete-at: 3100ms;
  --motion-dissolve-at: 4300ms; --motion-dissolve-duration: 900ms;
  font-family: Inter, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic UI", "Microsoft YaHei UI", "PingFang SC", "PingFang TC", "Noto Sans CJK KR", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 0; background: var(--page); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--page); }
button, input, select { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.dev-banner { position: sticky; z-index: 20; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; padding: 4px 18px; color: #65635a; border-bottom: 1px solid #dddcd4; background: #eeeee7; font-size: .62rem; line-height: 1.5; letter-spacing: .02em; text-align: center; }
.dev-banner strong { font-weight: 650; }
.dev-banner span { color: #727168; }
.app-shell { width: min(100%, 1100px); min-height: 100vh; margin: 0 auto; padding: 0 42px; }
.app-header { position: relative; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #bdbdb7; }
.app-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 30px; height: 2px; background: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; width: 29px; height: 29px; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; left: 4px; top: 14px; height: 1px; background: var(--ink); transform-origin: center; }
.brand-mark::before { width: 22px; transform: rotate(-35deg); }
.brand-mark::after { width: 11px; transform: rotate(55deg) translate(3px,-4px); }
.brand-mark span { left: 20px; top: 5px; width: 3px; height: 3px; background: var(--accent); box-shadow: 0 0 7px rgba(238,90,36,.42); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .83rem; font-weight: 820; letter-spacing: .1em; }
.brand small { margin-top: 1px; color: var(--ink-soft); font-size: .59rem; letter-spacing: .19em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.language-control { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.language-control:hover, .language-control:focus-within { color: var(--ink); border-color: var(--accent); }
.language-globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.1; pointer-events: none; }
.language-control select { appearance: none; color: inherit; padding-left: 0; border-bottom: 0; cursor: pointer; }
.language-chevron { position: absolute; right: 7px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); pointer-events: none; }
select { min-height: 34px; padding: 0 24px 0 7px; color: var(--ink-soft); border: 0; border-bottom: 1px solid transparent; background: transparent; font-size: .69rem; font-weight: 650; }
select:hover, select:focus-visible { color: var(--ink); border-color: var(--accent); }
.icon-button { width: 36px; height: 36px; padding: 0; color: var(--ink); border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--accent-strong); border-color: var(--border-strong); }
.workspace { position: relative; width: min(100%, 920px); margin: 14px auto 0; }
.workspace::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 1px; background: #deded8; }
.intro { display: grid; grid-template-columns: minmax(150px,.46fr) minmax(0,1.54fr); align-items: center; gap: 34px; margin: 22px 0 17px; }
.eyebrow { margin: 0; padding-left: 10px; color: var(--ink-soft); border-left: 2px solid var(--accent); font-size: .59rem; font-weight: 760; letter-spacing: .15em; line-height: 1.55; text-transform: uppercase; }
.intro h1 { margin: 0; font-size: clamp(1.8rem,4.2vw,3rem); font-weight: 840; letter-spacing: -.075em; line-height: .98; }
:lang(ja) .intro { grid-template-columns: minmax(0,1fr); column-gap: 0; }
:lang(ja) .intro > .eyebrow { grid-area: 1 / 1; justify-self: start; }
:lang(ja) .intro > h1 { grid-area: 1 / 1; width: 100%; text-align: center; }
:lang(ja) .eyebrow { white-space: pre; font-size: .7rem; letter-spacing: .06em; line-height: 1.65; }
:lang(ja) .intro h1 { font-family: "BIZ UDPGothic", "BIZ UDGothic", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; font-size: 30px; font-weight: 600; letter-spacing: .025em; line-height: 1.2; white-space: nowrap; }
.image-workspace { --stage-height: clamp(220px,42vh,440px); }
.image-stage { height: var(--stage-height); display: grid; place-items: center; }
.empty-stage { grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; border: 1px solid #d4d4ce; background: var(--surface); text-align: center; }
.empty-stage:hover, .empty-stage:focus-within { border-color: #aaa9a3; }
.empty-stage h2 { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: .015em; }
.empty-stage p { max-width: 32rem; margin: 9px 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.7; }
/* A photo seats within four open canvas corners; no receiver box or layout change. */
.image-entry { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 14px 5px; color: var(--ink-soft); border: 0; background: transparent; cursor: pointer; }
.image-entry-motion { width: 128px; height: 112px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.entry-frame { fill: none; stroke: #b8b8af; stroke-width: 1; transition: stroke 160ms ease; }
.entry-card { transform-origin: 64px 22px; transform: translateY(46px) rotate(0deg); }
.entry-card rect { fill: #fff; }
.entry-card circle { fill: #e8e8e1; stroke: none; }
.entry-accent { stroke: var(--accent); opacity: .6; }
.entry-pulse { fill: var(--accent); stroke: none; opacity: 0; filter: drop-shadow(0 0 3px rgba(238,90,36,.3)); }
.image-entry-label { color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .035em; }
.empty-stage .image-entry-hint { margin: 0; font-size: .63rem; line-height: 1.5; }
.image-entry:hover:not(:disabled) .entry-frame, .image-entry:focus-visible .entry-frame { stroke: var(--accent-strong); }
.image-entry:hover:not(:disabled) .image-entry-label { color: var(--accent-strong); }
.image-entry:disabled { cursor: wait; opacity: .65; }
.empty-stage[data-entry-motion="normal"] .entry-card { animation: image-entry-card 4200ms cubic-bezier(.4,0,.2,1) infinite; }
.empty-stage[data-entry-motion="normal"] .entry-pulse { animation: image-entry-pulse 4200ms ease-out infinite; }
.empty-stage[data-entry-motion="normal"] .entry-frame { animation: image-entry-frame 4200ms ease-out infinite; }
/* ~.7s approach, .5s anticipation (including a tiny pause), .34s entry,
   .59s soft settle, 1.1s hold,
   then a quiet fade/reset. No scale/squash or hover-triggered replay. */
@keyframes image-entry-card {
  0%, 5% { transform: translateY(-2px) rotate(-4deg); opacity: 0; }
  12% { transform: translateY(0) rotate(-4deg); opacity: 1; }
  28% { transform: translateY(18px) rotate(-2deg); opacity: 1; }
  34%, 40% { transform: translateY(16px) rotate(2.5deg); opacity: 1; animation-timing-function: cubic-bezier(.22,.7,.3,1); }
  48% { transform: translateY(47.5px) rotate(.6deg); opacity: 1; }
  55% { transform: translateY(45.5px) rotate(-.2deg); opacity: 1; }
  62%, 88% { transform: translateY(46px) rotate(0deg); opacity: 1; }
  98%, 100% { transform: translateY(46px) rotate(0deg); opacity: 0; }
}
@keyframes image-entry-pulse {
  0%, 43%, 66%, 100% { opacity: 0; }
  49% { opacity: .5; }
  57% { opacity: .16; }
}
.empty-stage[data-entry-motion="reduce"] .entry-card { animation: none; opacity: 1; }
.empty-stage[data-entry-motion="reduce"] .entry-pulse { animation: none; opacity: 0; }
@keyframes image-entry-frame {
  0%, 43%, 100% { opacity: .65; }
  49%, 62% { opacity: 1; }
  88% { opacity: .8; }
}
.empty-stage[data-entry-motion="reduce"] .entry-frame { animation: none; opacity: 1; transition: none; }
.button { position: relative; min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; color: var(--ink); border: 1px solid #aaa9a3; background: var(--surface); font-size: .75rem; font-weight: 760; letter-spacing: .05em; cursor: pointer; }
.button-primary { color: #fff; border-color: var(--ink); background: var(--ink); }
.button-primary::after { content: ""; position: absolute; left: -1px; top: -1px; width: 30px; height: 2px; background: var(--accent); }
.button-primary:hover:not(:disabled) { background: #252522; }
.button:disabled { color: #a0a09a; border-color: var(--border); background: #e9e9e5; cursor: not-allowed; }
.button:disabled::after { background: #b4b4ae; }
.selected-stage { grid-area: 1 / 1; width: 100%; height: 100%; display: grid; place-items: center; }
.image-surface { position: relative; width: min(100%,calc(var(--stage-height) * var(--image-ratio,1.6))); max-width: 920px; aspect-ratio: var(--image-ratio,1.6); overflow: hidden; border: 1px solid #d4d4ce; background: #e8e8e3; isolation: isolate; container-type: inline-size; }
.image-surface > img { width: 100%; height: 100%; display: block; object-fit: fill; }
.image-meta { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 0 12px; color: var(--ink-soft); border-bottom: 1px solid #bdbdb7; font-size: .64rem; font-weight: 650; letter-spacing: .06em; }
.image-meta > button { white-space: nowrap; }
.image-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-button, .verify-button { padding: 4px 2px; color: var(--ink); border: 0; background: transparent; font-size: .74rem; font-weight: 740; text-decoration: underline; text-decoration-color: rgba(238,90,36,.65); text-underline-offset: 5px; cursor: pointer; }
.text-button:hover, .verify-button:hover:not(:disabled) { color: var(--accent-strong); }
.mark-summary { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0 13px; border-bottom: 1px solid #bdbdb7; }
.section-label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: .56rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.mark-preview { min-height: 31px; display: flex; align-items: center; }
.typed-preview { color: var(--ink); font-size: clamp(1.12rem,2.6vw,1.45rem); font-weight: 760; letter-spacing: -.045em; }
.mark-empty { color: var(--ink-soft); font-size: .78rem; }
.bridge-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.bridge-status p { margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.bridge-status[data-phase="FAILED"] p { color: #8b361c; }
.bridge-status .text-button { font-size: .68rem; }
.text-button:disabled { color: #999990; cursor: not-allowed; text-decoration: none; }
.stored-mark-read { flex-direction: column; align-items: flex-start; gap: 5px; max-width: 100%; font-size: .78rem; }
.stored-mark-read small { color: var(--ink-soft); font-size: .64rem; line-height: 1.5; overflow-wrap: anywhere; }
.handwritten-preview { width: 168px; height: 34px; overflow: visible; }
.handwritten-preview path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.primary-actions { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(190px,.65fr) .55fr; grid-template-areas: "add verify ."; align-items: end; gap: 11px 22px; padding: 20px 0 15px; }
/* E direction: fine outlines and small purpose-specific icons, not capsule bars.
   Icon transforms stay inside the reserved inset; focus/hit areas are not clipped. */
.primary-actions > .button { min-height: 47px; padding: 0 22px 0 42px; border-radius: 3px; font-size: .75rem; font-weight: 700; letter-spacing: .035em; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 100ms ease; }
.primary-actions > .button::before, .primary-actions > .button::after { content: none; }
.primary-actions .cta-icon { position: absolute; left: 17px; top: 50%; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transform: translateY(-50%); transition: transform 180ms cubic-bezier(.2,.7,.3,1), color 180ms ease, filter 180ms ease; }
.primary-actions .cta-icon-accent { stroke: var(--cta-accent, var(--accent)); }
.primary-actions > .button:hover:not(:disabled) .cta-icon, .primary-actions > .button:focus-visible:not(:disabled) .cta-icon { color: var(--cta-icon-response, var(--accent-strong)); transform: translate(4px,-50%); filter: drop-shadow(0 0 2px rgba(238,90,36,.16)); }
.primary-actions > .button:hover:not(:disabled) .cta-pen, .primary-actions > .button:focus-visible:not(:disabled) .cta-pen { transform: translate(4px,-50%) rotate(-6deg); }
.primary-actions > .button:hover:not(:disabled) .cta-inspect, .primary-actions > .button:focus-visible:not(:disabled) .cta-inspect { transform: translate(4px,-50%) rotate(3deg); }
.primary-actions > .button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(17,17,15,.07); }
.primary-actions > .button:active:not(:disabled) .cta-icon { transform: translate(2px,-50%); filter: none; }
.primary-actions > .button:disabled .cta-icon, .primary-actions > .button:disabled .cta-icon-accent { color: #a0a09a; stroke: currentColor; filter: none; }
.add-button { --cta-accent: #bf855c; --cta-icon-response: #b4774c; grid-area: add; min-width: 230px; min-height: 47px; }
.add-button:not(:disabled) { color: #30342b; border-color: #918a7f; background: #fcfaf6; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.add-button .cta-icon { color: #9f7458; }
.add-button:hover:not(:disabled), .add-button:focus-visible:not(:disabled) { color: #30342b; border-color: #a9937d; background: #f8f3eb; box-shadow: inset 0 1px 0 #fff, 0 0 0 2px rgba(238,90,36,.035); }
.add-button:active:not(:disabled) { background: #f2ece2; box-shadow: inset 0 1px 3px rgba(17,17,15,.07); }
.verify-button { --cta-accent: #aa9682; --cta-icon-response: #a1836a; grid-area: verify; min-height: 47px; padding: 0 16px; color: #52574b; border: 1px solid #b8b9b1; background: #fff; text-decoration: none; text-align: center; }
.verify-button .cta-icon { color: #8a8e84; }
.verify-button:active:not(:disabled) { background: #f7f5f0; box-shadow: inset 0 1px 3px rgba(17,17,15,.05); }
.verify-button:hover:not(:disabled), .verify-button:focus-visible:not(:disabled) { color: #52574b; border-color: #a9a79b; background: #fcfbf8; box-shadow: inset 0 1px 0 #fff; }
.verify-button:disabled { color: #a0a09a; cursor: not-allowed; text-decoration: none; }
.action-feedback { min-height: 64px; display: flex; flex-direction: column; gap: 6px; padding: 2px 0 15px; }
.capability-note { margin: 0; color: var(--ink-soft); font-size: .62rem; line-height: 1.5; }
.status-line { min-height: 18px; margin: 0; padding-left: 9px; color: #70706a; border-left: 1px solid rgba(238,90,36,.38); font-size: .6rem; font-weight: 500; letter-spacing: .025em; line-height: 1.6; overflow-wrap: anywhere; }
.rights-intent { display: flex; align-items: center; gap: 8px; padding: 14px 0 16px; color: var(--ink-soft); border-top: 1px solid #bdbdb7; font-size: .68rem; font-weight: 620; white-space: nowrap; }
footer { padding: 28px 0 22px; color: var(--ink-soft); font-size: .57rem; font-weight: 630; letter-spacing: .07em; text-transform: uppercase; }
.motion-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; }
.motion-layer.playing, .motion-layer.reduced { opacity: 1; }
.motion-source { position: absolute; left: 4%; top: 4.5%; margin: 0; padding: 5px 0 4px; color: #171716; border-bottom: 1px solid rgba(238,90,36,.82); font-size: clamp(.54rem,1.5vw,.72rem); font-weight: 780; letter-spacing: .11em; text-transform: uppercase; opacity: 0; }
.motion-mark { position: absolute; left: 50%; top: 53%; width: min(var(--handwritten-width,57%),555px); transform: translate(-50%,-50%); }
.motion-mark[data-mode="typed"] { top: 44%; width: min(80%,555px); }
.motion-mark[data-kind="verify"] { width: min(var(--handwritten-width,69%),630px); }
.motion-mark[data-mode="typed"][data-kind="verify"] { top: 43%; width: min(88%,630px); }
.motion-typed { position: relative; left: 50%; width: max-content; margin: 0; padding: 5px 3px 12px; transform: translateX(-50%) scale(var(--typed-scale,1)); transform-origin: center; font-size: clamp(2.325rem,7.95vw,5.175rem); font-weight: 790; letter-spacing: -.065em; line-height: 1.05; white-space: nowrap; }
.motion-mark[data-kind="verify"] .motion-typed { font-size: clamp(2.625rem,8.85vw,5.775rem); }
.motion-typed-text, .motion-typed-aura { display: block; }
.motion-typed-text { position: relative; z-index: 2; color: #11110f; text-shadow: 0 1px 0 rgba(255,255,255,.82); clip-path: inset(0 100% 0 0); }
.motion-typed-aura { position: absolute; z-index: 1; inset: 5px 3px 12px; color: rgba(255,245,237,.78); -webkit-text-stroke: .6px rgba(238,90,36,.34); filter: blur(4px); opacity: 0; clip-path: inset(0 100% 0 0); }
.motion-typed-trace { position: absolute; z-index: 3; left: 3px; right: 3px; bottom: 5px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.motion-typed-fragments { position: absolute; z-index: 4; right: 19%; top: 18%; width: 2px; height: 2px; background: #fff7ef; box-shadow: 8px 5px rgba(238,90,36,.55),18px -1px rgba(255,249,243,.82),27px 8px rgba(238,90,36,.32),-10px 10px rgba(255,249,243,.68); opacity: 0; }
.playing .motion-typed-text { animation: typed-reveal var(--motion-draw) cubic-bezier(.35,.03,.12,1) forwards, typed-sublime var(--motion-dissolve-duration) steps(12,end) var(--motion-dissolve-at) forwards; }
.playing .motion-typed-aura { animation: aura-reveal var(--motion-draw) cubic-bezier(.35,.03,.12,1) forwards, aura-response 650ms ease 3500ms forwards, aura-sublime var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.playing .motion-typed-trace { animation: trace-reveal var(--motion-draw) forwards, trace-sublime var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.playing .motion-typed-fragments { animation: fragments-rise var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.motion-handwritten { width: 100%; display: block; overflow: visible; }
.motion-handwritten .diffusion, .motion-handwritten .glow, .motion-handwritten .ink { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; }
.motion-handwritten .diffusion { stroke: rgba(238,90,36,.42); stroke-width: 12; filter: blur(6px); opacity: 0; }
.motion-handwritten .glow { stroke: rgba(255,238,226,.84); stroke-width: 8; filter: blur(3.5px); }
.motion-handwritten .ink { stroke: rgba(17,17,15,.94); stroke-width: 4.4; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.playing .motion-handwritten .diffusion { animation: stroke-reveal var(--stroke-duration) cubic-bezier(.38,.05,.17,1) var(--stroke-delay) forwards, diffusion-absorb var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.playing .motion-handwritten .glow { animation: stroke-reveal var(--stroke-duration) cubic-bezier(.38,.05,.17,1) var(--stroke-delay) forwards, glow-absorb var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.playing .motion-handwritten .ink { animation: stroke-reveal var(--stroke-duration) cubic-bezier(.38,.05,.17,1) var(--stroke-delay) forwards, core-absorb 620ms ease-in var(--motion-dissolve-at) forwards; }
.motion-rights { position: absolute; left: 50%; top: 74%; width: max-content; max-width: calc(100% - 20px); white-space: nowrap; margin: 0; padding: 7px 10px 7px 12px; color: #171716; border-left: 2px solid var(--accent); background: rgba(255,255,252,.9); font-size: clamp(.62rem,1.95vw,.82rem); font-weight: 680; transform: translate(-50%,7px); opacity: 0; }
.playing .motion-rights { animation: copy-arrive 1000ms ease-out var(--motion-rights-at) forwards, copy-release var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.playing.motion-verify .motion-source { animation: source-arrive 480ms ease-out 300ms forwards, copy-release var(--motion-dissolve-duration) ease-out var(--motion-dissolve-at) forwards; }
.reduced .motion-source, .reduced .motion-typed-text, .reduced .motion-rights { opacity: 1; }
.reduced .motion-typed-text, .reduced .motion-typed-aura { clip-path: none; }
.reduced .motion-typed-aura, .reduced .motion-typed-fragments, .reduced .motion-handwritten .diffusion { opacity: 0; }
.reduced .motion-typed-trace { transform: scaleX(1); }
.reduced .motion-handwritten .glow, .reduced .motion-handwritten .ink { stroke-dashoffset: 0; }
.reduced .motion-rights { transform: translate(-50%,0); }
/* The stable stage can fit a narrow portrait. Keep its copy separate from
   completion without changing mark geometry, keyframes or timing. */
@container (max-width:260px) {
  .motion-rights { top: 62%; width: 88%; padding: 5px 6px; font-size: .68rem; line-height: 1.5; white-space: normal; text-wrap: balance; }
  .motion-source { font-size: .5rem; letter-spacing: .04em; }
}
/* Recovered Capsule Adjustment 02 keyframes. Explicit starts prevent the
   dissolve animation from resetting already-drawn strokes/masks. */
@keyframes typed-reveal { 0% { clip-path: inset(0 100% 0 0); transform: translateY(1px); } 100% { clip-path: inset(0); transform: translateY(0); } }
@keyframes aura-reveal { 0% { clip-path: inset(0 100% 0 0); opacity: 0; } 100% { clip-path: inset(0); opacity: .1; } }
@keyframes aura-response { 0% { opacity: .1; filter: blur(4px); } 55% { opacity: .32; filter: blur(5px); } 100% { opacity: .16; filter: blur(4px); } }
@keyframes typed-sublime { 0% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: blur(0); transform: translateY(0); opacity: 1; } 48% { clip-path: polygon(0 0,100% 0,100% 54%,91% 57%,82% 51%,72% 58%,62% 53%,51% 59%,40% 52%,29% 58%,18% 51%,8% 56%,0 52%); filter: blur(.25px) brightness(1.06); transform: translateY(-2px); opacity: .84; } 100% { clip-path: polygon(0 0,100% 0,100% 2%,86% 0,72% 3%,57% 0,43% 2%,27% 0,12% 3%,0 0); filter: blur(1.4px) brightness(1.18); transform: translateY(-11px); opacity: 0; } }
@keyframes aura-sublime { 0% { filter: blur(4px); transform: translateY(0) scale(1); opacity: .16; } 35% { opacity: .42; } 100% { filter: blur(10px); transform: translateY(-15px) scale(1.025); opacity: 0; } }
@keyframes trace-reveal { to { transform: scaleX(1); } }
@keyframes trace-sublime { to { filter: blur(3px); transform: translateY(-7px) scaleX(.28); transform-origin: center; opacity: 0; } }
@keyframes fragments-rise { 0% { transform: translateY(3px); opacity: 0; } 24% { opacity: .7; } 100% { transform: translateY(-17px); opacity: 0; } }
@keyframes stroke-reveal { to { stroke-dashoffset: 0; } }
@keyframes core-absorb { 0% { stroke-dashoffset: 0; stroke-width: 4.4; filter: blur(0) drop-shadow(0 1px 0 rgba(255,255,255,.7)); opacity: 1; } 100% { stroke-dashoffset: 0; stroke-width: 2.6; filter: blur(1.2px); opacity: 0; } }
@keyframes glow-absorb { 0% { stroke-dashoffset: 0; stroke-width: 8; filter: blur(3.5px); transform: scale(1); opacity: .72; } 45% { stroke-width: 12; filter: blur(7px); transform: scale(1.012); opacity: .45; } 100% { stroke-width: 15; filter: blur(11px); transform: scale(1.025); opacity: 0; } }
@keyframes diffusion-absorb { 0% { stroke-dashoffset: 0; stroke-width: 12; filter: blur(6px); transform: scale(1); opacity: 0; } 24% { opacity: .34; } 62% { stroke-width: 18; filter: blur(11px); transform: scale(1.022); opacity: .16; } 100% { stroke-width: 22; filter: blur(15px); transform: scale(1.04); opacity: 0; } }
@keyframes copy-arrive { to { transform: translate(-50%,0); opacity: 1; } }
@keyframes source-arrive { to { opacity: 1; } }
@keyframes copy-release { 0% { filter: blur(0); clip-path: inset(0); opacity: 1; } 100% { filter: blur(1.2px); clip-path: inset(0 0 100% 0); transform: translateY(-5px); opacity: 0; } }
.dialog { width: min(calc(100% - 28px),660px); max-height: calc(100vh - 30px); padding: 0; overflow: auto; color: var(--ink); border: 1px solid #8e8e88; background: transparent; box-shadow: 0 24px 60px rgba(16,16,15,.2); }
.dialog::backdrop { background: rgba(16,16,15,.34); }
.dialog-card { padding: 30px; background: #fff; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header h2 { margin: 0; font-size: 1.55rem; font-weight: 820; letter-spacing: -.055em; }
.mark-tabs { display: grid; grid-template-columns: auto auto 1fr; gap: 24px; margin: 25px 0 24px; border-bottom: 1px solid var(--border); }
.mark-tabs button { min-height: 40px; padding: 0 0 9px; color: var(--ink-soft); border: 0; background: transparent; font-size: .77rem; cursor: pointer; }
.mark-tabs button[aria-selected="true"] { color: var(--ink); border-bottom: 2px solid var(--accent); }
.field-label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: .7rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.text-input { width: 100%; min-height: 48px; padding: 0 4px; color: var(--ink); border: 0; border-bottom: 1px solid var(--border-strong); outline: none; }
.field-help, .identity-note, .details-body { color: var(--ink-soft); font-size: .77rem; line-height: 1.65; }
.typed-sample { min-height: 130px; display: grid; margin-top: 24px; place-items: center; overflow: hidden; border-block: 1px solid var(--border); font-size: clamp(1.55rem,7vw,2.45rem); font-weight: 760; }
.drawing-wrap { position: relative; margin-top: 13px; overflow: hidden; border: 1px solid #8e8e88; background: #fff; touch-action: none; }
#drawingCanvas { position: relative; z-index: 1; width: 100%; height: auto; display: block; aspect-ratio: 24/11; cursor: crosshair; touch-action: none; }
.drawing-hint { position: absolute; left: 50%; top: 50%; color: #a8a8a2; font-size: .82rem; transform: translate(-50%,-50%); pointer-events: none; }
.drawing-wrap.has-strokes .drawing-hint { display: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width:700px) {
  .dev-banner { gap: 1px 10px; padding-inline: 12px; font-size: .58rem; }
  .app-shell { padding-inline: 17px; }
  .workspace::before { display: none; }
  .intro { display: block; margin: 13px 0 14px; }
  .intro > .eyebrow { margin-bottom: 6px; }
  .intro h1 { font-size: clamp(1.65rem,8vw,2.15rem); line-height: 1.03; }
  .image-workspace { --stage-height: clamp(180px,30vh,300px); }
  .empty-stage { padding: 12px; }
  .image-entry-motion { width: 120px; height: 105px; }
  .empty-stage p { margin-inline: auto; }
  .empty-stage > .button { width: 100%; }
  .primary-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "add add" "verify verify"; gap: 13px 16px; }
  .add-button { width: 100%; min-width: 0; }
  .motion-mark { width: min(var(--handwritten-width,57%),480px); }
  .motion-mark[data-mode="typed"] { width: min(80%,510px); }
  .motion-mark[data-kind="verify"] { width: min(var(--handwritten-width,69%),540px); }
  .motion-mark[data-mode="typed"][data-kind="verify"] { width: min(88%,540px); }
  .dialog-card { padding: 24px 20px; }
}
@media (max-width:420px) {
  :lang(ja) .intro h1 { font-size: 24px; }
  .brand strong { font-size: .8rem; }
  .mark-tabs { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .button, select, .primary-actions > .button, .primary-actions .cta-icon { transition: none; }
  .primary-actions > .button:active:not(:disabled) { transform: none; }
  .primary-actions > .button:hover:not(:disabled) .cta-icon, .primary-actions > .button:focus-visible:not(:disabled) .cta-icon, .primary-actions > .button:active:not(:disabled) .cta-icon { transform: translateY(-50%); filter: none; }
}
@media (prefers-reduced-motion:reduce) {
  /* The existing explicit Preview override may opt into normal motion. */
  .empty-stage:not([data-entry-motion="normal"]) .entry-card { animation: none; opacity: 1; }
  .empty-stage:not([data-entry-motion="normal"]) .entry-pulse { animation: none; opacity: 0; }
  .empty-stage:not([data-entry-motion="normal"]) .entry-frame { animation: none; opacity: 1; }
  .entry-frame { transition: none; }
}
/* Reuse the existing resolved Preview motion mode; no OS preference is changed. */
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 100ms ease; }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions .cta-icon { transition: transform 180ms cubic-bezier(.2,.7,.3,1), color 180ms ease, filter 180ms ease; }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:hover:not(:disabled) .cta-icon, .workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:focus-visible:not(:disabled) .cta-icon { transform: translate(4px,-50%); filter: drop-shadow(0 0 2px rgba(238,90,36,.16)); }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:hover:not(:disabled) .cta-pen, .workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:focus-visible:not(:disabled) .cta-pen { transform: translate(4px,-50%) rotate(-6deg); }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:hover:not(:disabled) .cta-inspect, .workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:focus-visible:not(:disabled) .cta-inspect { transform: translate(4px,-50%) rotate(3deg); }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:active:not(:disabled) { transform: translateY(1px); }
.workspace:has(.empty-stage[data-entry-motion="normal"]) .primary-actions > .button:active:not(:disabled) .cta-icon { transform: translate(2px,-50%); filter: none; }
/* The existing Preview reduce override also disables CTA movement. */
.workspace:has(.empty-stage[data-entry-motion="reduce"]) .primary-actions > .button { transition: none; transform: none; }
.workspace:has(.empty-stage[data-entry-motion="reduce"]) .primary-actions .cta-icon { transition: none; transform: translateY(-50%); filter: none; }