@layer components {
  /* 실제 터치 UI의 중성 다크 표면·44px 크롬은 보존한다. 바깥 무대와 예시 웹 페이지만 밝다. */
  .light-home .touch-story { --touch-green:#1c8d5e; position:relative; min-height:0; padding:0; color:#263b30; container:touch-story / inline-size; }
  .touch-story-route { display:flex; align-items:center; justify-content:center; gap:16px; padding:0 20px 28px; font:500 13px/1.5 var(--sans); color:#41624d; }
  .touch-route-device { display:flex; align-items:center; gap:8px; flex:none; }
  .touch-story-route svg { width:23px; height:23px; }
  .touch-route-status { display:flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #b9d7c6; border-radius:20px; background:#ffffffb3; color:#1c704c; }
  .touch-route-status>i { width:6px; height:6px; border-radius:50%; background:var(--touch-green); }
  .touch-route-line { position:relative; display:block; width:80px; height:1px; background:#9dc4ae; overflow:visible; }
  .touch-route-line>i { position:absolute; width:5px; height:5px; background:var(--touch-green); border-radius:50%; inset:-2px auto auto 100%; }
  .touch-route-line>i:not(:first-child) { display:none; }
  .touch-story-stage { position:relative; min-height:660px; padding:10px 0 65px; }
  .light-home .touch-story .touch-tablet { width:calc(100% - 145px); max-width:1040px; border:1px solid #758c8088; border-radius:12px; background:#1b1f26; box-shadow:0 25px 60px #1e4a3226,0 2px 5px #1e4a3215; }
  .touch-story .touch-appbar { height:44px; gap:20px; padding:0 16px; border-bottom:1px solid #ffffff1a; background:#1b1f26; color:#e8ebef; font:400 13px/1 'Segoe UI Variable','Segoe UI',var(--sans); }
  .touch-story .touch-appbar-context { font-size:14px; }
  .touch-story .touch-settings img { width:21px; height:21px; object-fit:contain; }
  .touch-story .touch-layout { grid-template-columns:190px minmax(0,1fr); min-height:474px; }
  .touch-story .touch-sidebar { padding:18px 8px; border-right:1px solid #ffffff1a; background:#1b1f26; }
  .light-home .touch-story .touch-group-title { margin:0; padding:0 8px 9px; color:#9aa3ae; font:500 12px/1.4 'Segoe UI',var(--sans)!important; letter-spacing:0!important; }
  .touch-story .touch-row { padding:10px 8px; margin-bottom:5px; }
  .touch-story .touch-row-selected { background:#232a33; border-color:#ffffff14; }
  .touch-story .touch-row-select { gap:5px; }
  .touch-story .touch-row-name { color:#dce3eb; font-size:12px; }
  .touch-story .touch-row-status { color:#9aa3ae; font-size:12px; }
  .touch-story .touch-row-context { color:#7e8997; font-size:12px; }
  .touch-story .touch-row-menu { color:#99a5b3; }
  .touch-story .touch-pane-badge { color:#a8b3c0; font-size:12px; }
  .touch-story .touch-group-header { margin-top:22px; }
  .touch-story .touch-open-git,.touch-story .touch-new-page { font-size:12px; color:#b7c5d4; background:transparent; border-color:#ffffff1a; }
  .touch-story .touch-browser-group-title { color:#dce3eb; font-size:12px; }
  .touch-story .touch-panes { gap:6px; background:#0d1116; }
  .touch-story .touch-pane-heading { min-height:44px; padding:0 12px; background:#1b1f26; color:#e8ebef; border-color:#ffffff1a; font-size:12px; }
  .touch-story .touch-pane-active { box-shadow:inset 0 -1px #909da9; }
  .touch-story .touch-terminal { background:#080b0f; }
  .touch-story .touch-terminal-body { padding:23px 17px 16px; color:#e8ebef; font:12px/1.9 'Cascadia Mono',Consolas,var(--sans),monospace; }
  .light-home .touch-story .touch-codex-heading { color:#e8ebef; gap:9px; margin-bottom:23px; }
  .light-home .touch-story .touch-codex-heading strong { color:#e8ebef; font:400 14px/1.5 'Segoe UI',var(--sans); }
  .touch-story .touch-terminal-request { margin:0 0 15px; color:#e8ebef; font-size:12px; line-height:1.85; }
  .touch-story .touch-terminal-request>span { margin-right:7px; }
  .touch-story .touch-terminal-output { margin:13px 0; color:#b4bfca; font-size:12px; line-height:1.85; }
  .touch-story .touch-terminal-success { color:#a9d0b6; }
  .touch-story .touch-terminal-diff { margin:15px 0; font-size:12px; line-height:2; }
  .touch-story .touch-terminal-removed { color:#d4aaaa; }
  .touch-story .touch-terminal-added { color:#a1d3b3; padding:2px 5px; margin-inline:-5px; background:#193327; }
  .touch-terminal-scenes { position:relative; min-height:242px; }
  .touch-terminal-scene { position:absolute; inset:0; }
  .touch-story .touch-terminal-input { margin-top:23px; }
  .touch-story .touch-terminal-cursor { flex:none; display:inline-block; vertical-align:middle; width:6px; height:14px; background:#cad2da; }
  .touch-story-status-stack { display:block; position:relative; min-height:16px; }
  .touch-story-status-stack>span { position:absolute; inset:0; white-space:nowrap; }
  .touch-working-dot,.touch-idle-dot { display:inline-block; width:5px; height:5px; margin-right:5px; vertical-align:2px; border-radius:50%; background:#1c8d5e; }
  .touch-idle-dot { background:#8b9b92; }
  .touch-agent-progress { display:flex; align-items:center; gap:7px; margin:24px 0; color:#a8b4c1; font-size:12px; }
  .touch-agent-progress>i { width:9px; height:9px; border:1px solid #788597; border-top-color:#c7d3de; border-radius:50%; }
  .touch-agent-progress>small { margin-left:auto; color:#768597; font-size:12px; }
  .touch-story .touch-keys { position:relative; min-height:45px; background:#15181d; border-color:#ffffff1a; color:#b3bdc9; font:12px/1.3 'Segoe UI',var(--sans); }
  .touch-story .touch-keys-strip { gap:0; padding:0 4px; }
  .touch-story .touch-keys-strip>span { display:grid; place-items:center; min-width:36px; height:38px; }
  .touch-story .touch-key-pinned { width:36px; color:#bdc7d3; }
  .touch-story .touch-live-request { margin-top:19px; min-height:48px; }
  .touch-story .touch-webpage { background:#fff; color:#263b30; }
  .touch-story .touch-site-nav { padding:13px 15px; border-color:#e0ebe4; color:#6b8474; font-size:12px; }
  .touch-story .touch-site-nav>span:first-child { color:#20432e; gap:7px; }
  .touch-story .touch-site-nav strong { font-size:14px; }
  .touch-story .touch-site-main { padding:28px 20px 22px; }
  .touch-story .touch-site-eyebrow { font:500 12px/1.5 var(--sans); color:#5d7b68; margin:0 0 15px; }
  .light-home .touch-story .touch-site-main h3 { margin:0; color:#1d3e29; font:800 27px/1.4 'Gothic A1',var(--sans)!important; letter-spacing:-.06em!important; }
  .touch-story .touch-site-description { color:#6b8273; font:12px/1.85 var(--sans); margin:16px 0 0; }
  .touch-download-wrap { display:inline-flex; position:relative; margin-top:24px; }
  .touch-story .touch-site-download { display:inline-flex; align-items:center; justify-content:space-between; gap:15px; margin:0; min-height:40px; padding:11px 13px; border:1px solid #1c8d5e; border-radius:6px; background:#1c8d5e; color:#fff; font:500 12px/1.5 var(--sans); white-space:nowrap; }
  .touch-story .touch-site-platforms { color:#7a9082; margin-top:10px; font-size:12px; }
  .touch-story .touch-site-agents { gap:15px; margin-top:24px; }
  .touch-story .touch-site-agents>span { color:#466451; font-size:12px; gap:7px; }
  .touch-story .touch-site-agents img { width:24px; height:24px; object-fit:contain; }
  .touch-story .touch-chatgpt-mark { background:#edf3ef; padding:2px; }
  .touch-download-mark { position:absolute; inset:-6px; border:1.5px solid #1c8d5e; border-radius:8px; pointer-events:none; }
  .touch-download-mark>small { position:absolute; left:-2px; top:-23px; padding:3px 6px; background:#1c8d5e; color:#fff; border-radius:4px 4px 0 0; font:11px/1.3 var(--sans); white-space:nowrap; }
  .touch-download-mark>i { position:absolute; width:5px; height:5px; border:1px solid #1c8d5e; background:#fff; }
  .touch-download-mark>i:nth-of-type(1) { top:-3px; left:-3px; }
  .touch-download-mark>i:nth-of-type(2) { top:-3px; right:-3px; }
  .touch-download-mark>i:nth-of-type(3) { bottom:-3px; left:-3px; }
  .touch-download-mark>i:nth-of-type(4) { bottom:-3px; right:-3px; }
  .touch-story-tap { position:absolute; left:68%; top:56%; width:24px; height:31px; filter:drop-shadow(0 2px 2px #0002); z-index:2; pointer-events:none; }
  .touch-story-tap>svg { position:relative; width:22px; height:28px; }
  .touch-story-tap>i { position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; border:2px solid #1c8d5e; opacity:0; }
  .touch-web-confirm { display:flex; gap:9px; margin-top:26px; color:#66806f; font:12px/1.7 var(--sans); }
  .touch-web-confirm>i { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:#e1f2e8; color:#1c8d5e; font-style:normal; }
  .touch-web-confirm strong { font-weight:500; color:#386c4b; }
  .touch-story .touch-web-controls { min-height:45px; gap:14px; padding:5px 11px; background:#15181d; border-color:#ffffff1a; color:#acb9c8; }
  .touch-story .touch-web-control { font:10px/1.2 var(--sans); gap:4px; }
  .touch-story .touch-web-control svg { width:17px; height:17px; }
  .light-home .touch-story .touch-phone { position:absolute; top:106px; right:0; width:306px; max-width:none; border:1px solid #73827688; border-radius:10px; background:#1b1f26; box-shadow:0 30px 65px #143d2b30,0 3px 9px #143d2b19; }
  .touch-story .touch-phone .touch-appbar { gap:12px; padding:0 12px; font-size:12px; }
  .touch-story .touch-phone .touch-appbar-context { flex:1; font-size:12px; }
  .touch-story .touch-phone .touch-list-toggle { font-size:16px; }
  .touch-story .touch-phone .touch-split-toggle,.touch-story .touch-phone .touch-new-session { font-size:12px; }
  .touch-story .touch-control-dim { color:#697685; }
  .touch-phone-content { position:relative; height:469px; background:#fff; }
  .touch-story .touch-phone-terminal,.touch-phone-web { position:absolute; inset:0; display:flex; flex-direction:column; min-height:0; }
  .touch-story .touch-phone .touch-terminal-body { padding:23px 19px; font-size:14px; }
  .touch-story .touch-phone .touch-codex-heading strong { font-size:15px; }
  .touch-story .touch-phone .touch-terminal-request,.touch-story .touch-phone .touch-terminal-output,.touch-story .touch-phone .touch-terminal-diff { font-size:14px; }
  .touch-story .touch-phone .touch-terminal-input { margin-top:29px; }
  .touch-story .touch-phone .touch-terminal-scenes { min-height:245px; }
  .touch-story .touch-phone .touch-live-request { min-height:64px; display:flex; align-items:flex-start; gap:3px; }
  .touch-story .touch-phone .touch-live-request>span:nth-child(2) { flex:1; }
  .touch-story .touch-phone .touch-live-request>.touch-terminal-cursor { margin-top:5px; }
  .touch-story .touch-phone .touch-site-main { padding:29px 23px; }
  .light-home .touch-story .touch-phone .touch-site-main h3 { font-size:29px!important; }
  .touch-story .touch-phone .touch-site-eyebrow,.touch-story .touch-phone .touch-site-description,.touch-story .touch-phone .touch-site-download { font-size:14px; }
  .touch-story .touch-phone .touch-site-download { margin-top:25px; padding:11px 14px; min-height:44px; }
  .touch-story .touch-phone-web-before .touch-download-wrap { margin-top:25px; }
  .touch-story .touch-phone-web-before .touch-site-download { margin-top:0; color:#5b7666; background:#f4f7f5; border-color:#aac4b5; }
  .touch-story .touch-phone-web-before .touch-pick-control { color:#9dd1b3; }
  .touch-story .touch-phone .touch-site-platforms,.touch-story .touch-phone .touch-web-confirm { font-size:12px; }
  .touch-story .touch-phone .touch-web-confirm { margin-top:27px; }
  .touch-story .touch-phone .touch-web-controls { gap:23px; padding-inline:16px; }
  .touch-story .touch-phone .touch-web-control { font-size:11px; }
  .touch-story .touch-phone .touch-web-control svg { width:20px; height:20px; }
  .touch-key-tap { display:none; position:absolute; top:17px; left:154px; width:12px; height:12px; border:2px solid #d7f3e3; border-radius:50%; pointer-events:none; }
  .touch-story-arrival { position:absolute; left:34px; bottom:24px; display:flex; gap:13px; align-items:center; padding:16px 22px; border:1px solid #c1dccb; background:#ffffffed; border-radius:12px; box-shadow:0 10px 25px #143d2b0d; font:12px/1.6 var(--sans); }
  .touch-story-arrival>span { display:grid; place-items:center; width:32px; height:32px; color:#1c8d5e; background:#e1f2e8; border-radius:50%; font-size:18px; }
  .touch-story-arrival>div { display:flex; flex-direction:column; gap:3px; }
  .touch-story-arrival strong { color:#2e573b; font-weight:500; font-size:13px; }
  .touch-story-arrival>div>span { color:#7b9183; }
  .light-home .touch-story>figcaption { position:static; display:flex; align-items:center; justify-content:space-between; gap:14px; color:#6e8878; font:12px/1.6 var(--sans); margin-top:0; padding:12px 0 0; border-top:1px solid #cce0d4; }
  .touch-story [data-product-until] { visibility:hidden; }
  .touch-story.is-product-ready [data-product-until] { visibility:visible; }
  .touch-story.is-product-ready[data-product-phase="0"] .touch-tablet .touch-site-download,
  .touch-story.is-product-ready[data-product-phase="1"] .touch-tablet .touch-site-download { color:#5b7666; background:#f4f7f5; border-color:#aac4b5; }
  .touch-story.is-product-ready .touch-agent-progress>i { animation:touch-story-spin 1.1s linear infinite; animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-story-tap { animation:touch-story-pointer 16s linear infinite; animation-delay:var(--product-time-offset,0ms); animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-story-tap>i { animation:touch-story-click 16s linear infinite; animation-delay:var(--product-time-offset,0ms); animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-route-line>i { display:block; animation:touch-story-signal 3.2s linear infinite; animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-route-line>i:nth-child(2) { animation-delay:-1.05s; }
  .touch-story.is-product-ready .touch-route-line>i:nth-child(3) { animation-delay:-2.1s; }
  .touch-story.is-product-ready .touch-key-tap { display:block; opacity:0; animation:touch-story-key-tap 16s linear infinite; animation-delay:var(--product-time-offset,0ms); animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-key-enter { animation:touch-story-key 16s linear infinite; animation-delay:var(--product-time-offset,0ms); animation-play-state:var(--product-play-state,running); }
  .touch-story.is-product-ready .touch-working-dot { animation:touch-story-working 1.4s ease-in-out infinite; animation-play-state:var(--product-play-state,running); }
  @keyframes touch-story-spin { to { transform:rotate(360deg); } }
  @keyframes touch-story-signal { 0% { transform:translateX(-80px); opacity:0; } 15%,85% { opacity:1; } 100% { transform:translateX(0); opacity:0; } }
  @keyframes touch-story-pointer { 0%,22% { transform:translate(55px,90px); opacity:0; } 25% { opacity:1; } 28%,32% { transform:translate(0,0); opacity:1; } 34%,100% { transform:translate(-5px,-3px); opacity:0; } }
  @keyframes touch-story-click { 0%,27% { transform:scale(.2); opacity:0; } 28% { transform:scale(.3); opacity:.9; } 31% { transform:scale(4.5); opacity:0; } 32%,100% { opacity:0; } }
  @keyframes touch-story-key-tap { 0%,45% { opacity:0; transform:scale(.25); } 46% { opacity:1; transform:scale(.4); } 50% { opacity:0; transform:scale(3); } 51%,100% { opacity:0; } }
  @keyframes touch-story-key { 0%,45%,50%,100% { color:#b3bdc9; background:transparent; } 46%,49% { color:#eafff2; background:#27764f; border-radius:5px; } }
  @keyframes touch-story-working { 0%,100% { opacity:.45; box-shadow:0 0 0 0 #1c8d5e00; } 50% { opacity:1; box-shadow:0 0 0 3px #1c8d5e16; } }
  @container touch-story (max-width:960px) {
    .touch-story .touch-sidebar { display:none; }
    .touch-story .touch-layout { grid-template-columns:minmax(0,1fr); }
    .light-home .touch-story .touch-tablet { width:100%; }
    .touch-story-stage { min-height:845px; }
    .touch-story .touch-terminal-body { padding-inline:16px; }
    .touch-story .touch-site-main { padding-inline:18px; }
    .touch-story .touch-agent-progress>small { display:none; }
    .light-home .touch-story .touch-phone { width:300px; top:300px; }
  }
  @container touch-story (max-width:730px) {
    .light-home .touch-story .touch-tablet { display:none; }
    .touch-story-stage { min-height:635px; padding-bottom:85px; }
    .light-home .touch-story .touch-phone { position:relative; inset:auto; margin:0 auto; width:min(100%,390px); }
    .touch-phone-content { height:465px; }
    .touch-story .touch-phone .touch-terminal-body { padding:25px 23px; }
    .touch-story .touch-phone .touch-terminal-request,.touch-story .touch-phone .touch-terminal-output,.touch-story .touch-phone .touch-terminal-diff { font-size:14px; }
    .touch-story .touch-phone .touch-appbar-context { font-size:14px; }
    .touch-story-arrival { left:50%; bottom:7px; transform:translateX(-50%); white-space:nowrap; padding:13px 17px; }
    .touch-story-arrival strong { font-size:12px; }
    .touch-story-arrival>div>span { font-size:12px; }
    .touch-story-route { gap:10px; font-size:12px; padding:0 0 21px; }
    .touch-route-line { width:36px; }
    .touch-route-status { font-size:12px; padding:6px 9px; gap:5px; }
    .touch-route-device { gap:5px; }
    .touch-story-route svg { width:20px; height:20px; }
    .touch-route-line>i { animation-name:touch-story-signal-small; }
    .light-home .touch-story>figcaption { font-size:11px; }
  }
  @container touch-story (max-width:350px) {
    .touch-route-line { width:17px; }
    .touch-story-route { gap:6px; }
    .touch-route-status { padding-inline:6px; font-size:11px; }
    .touch-story .touch-phone .touch-appbar { gap:8px; padding-inline:10px; }
    .touch-story .touch-phone .touch-new-session,.touch-story .touch-phone .touch-split-toggle { font-size:11px; }
    .touch-story .touch-phone .touch-appbar-context { font-size:12px; }
    .touch-story .touch-phone .touch-site-main { padding-inline:20px; }
    .light-home .touch-story .touch-phone .touch-site-main h3 { font-size:27px!important; }
    .touch-story-arrival { padding:12px; gap:8px; }
    .touch-story-arrival strong,.touch-story-arrival>div>span { font-size:11px; }
    .touch-story-arrival>span { width:27px; height:27px; }
  }
  @keyframes touch-story-signal-small { 0% { transform:translateX(-36px); opacity:0; } 15%,85% { opacity:1; } 100% { transform:translateX(0); opacity:0; } }
  @media (prefers-reduced-motion:reduce) {
    .touch-story [data-product-until] { visibility:hidden!important; opacity:0!important; }
    .touch-story [data-product-at]:not([data-product-until]) { visibility:visible!important; opacity:1!important; }
    .touch-story .touch-tablet .touch-site-download { color:#fff!important; background:#1c8d5e!important; border-color:#1c8d5e!important; }
    .touch-story .touch-key-tap { display:none!important; }
    .touch-story *, .touch-story *::before, .touch-story *::after { animation:none!important; transition:none!important; }
  }
}