@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
:root {
  color-scheme: dark;
  --bg-deep:#0A0612; --bg-surface:#15101F; --bg-elevated:#1F1A2E; --bg-glass:rgba(31,26,46,.72);
  --text-primary:#E9E3F5; --text-secondary:#B5ABCB; --text-muted:#7E748E; --accent-primary:#A78BFA;
  --border-subtle:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.12);
  --font-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--bg-deep); color:var(--text-primary); font:16px/1.7 var(--font-sans); word-break:keep-all; }
body:has(dialog[open]) { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; border:0; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent-primary); outline-offset:5px; }
img { display:block; max-width:100%; }
button img { pointer-events:none; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:700; }
::selection { background:var(--accent-primary); color:var(--bg-deep); }
.wrap { width:min(1184px,calc(100% - 96px)); margin:auto; }
.header { height:88px; padding:0 48px; max-width:1480px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border-subtle); }
.brand { display:flex; align-items:center; gap:18px; }
.brand img,.footer img { filter:brightness(0) invert(1); }
.brand span { color:var(--text-secondary); font-size:12px; padding-left:18px; border-left:1px solid var(--border-strong); }
.header nav { display:flex; gap:30px; color:var(--text-secondary); font-size:13px; }
.header nav a { padding:12px 0; }
a:hover { color:var(--accent-primary); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:54px; padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600; transition:background .2s,transform .2s; }
.button:active { transform:scale(.98); }
.primary { background:var(--accent-primary); color:var(--bg-deep); }
.primary:hover { background:color-mix(in srgb,var(--accent-primary) 85%,var(--text-primary)); }
.secondary { background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text-primary); }
.secondary:hover { background:var(--bg-surface); }
.button-small { min-height:44px; padding:10px 18px; gap:18px; font-size:12px; }
.text-link { display:inline-flex; gap:15px; align-items:center; min-height:44px; font-size:13px; }
.eyebrow { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-primary); font-weight:500; margin-bottom:20px; }
.hero { min-height:590px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:28px; padding-block:30px; }
h1 { font-size:clamp(38px,4.1vw,57px); letter-spacing:-.045em; line-height:1.25; }
h1 span { color:var(--accent-primary); }
.hero-description { color:var(--text-secondary); margin-top:25px; font-size:17px; line-height:1.8; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:28px; }
.store-links { display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; }
.store-links a { display:flex; align-items:center; gap:8px; font-size:12px; min-height:44px; }
.store-links span { font-size:10px; color:var(--text-secondary); }
.hero-art { position:relative; height:500px; isolation:isolate; }
.orbit { position:absolute; inset:17% 9%; border:1px solid var(--border-strong); border-radius:50%; transform:rotate(-24deg); z-index:-2; }
.hero-cover { position:absolute; width:43%; aspect-ratio:2/3; height:auto; border-radius:12px; border:1px solid var(--border-strong); }
.cover-left { left:0; top:100px; transform:rotate(-13deg); filter:brightness(.68); }
.cover-right { right:0; top:85px; transform:rotate(12deg); filter:brightness(.68); }
.hero-main-cover { position:absolute; top:25px; left:23%; width:54%; padding:0; border-radius:13px; border:1px solid var(--border-strong); background:var(--bg-surface); overflow:hidden; transform:rotate(-3deg); transition:transform .3s; }
.hero-main-cover:hover { transform:rotate(0deg) translateY(-5px); }
.hero-main-cover img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.cover-action { position:absolute; bottom:0; left:0; right:0; padding:24px 15px 12px; display:flex; justify-content:space-between; font-size:12px; background:linear-gradient(transparent,var(--bg-deep)); }
.art-star { position:absolute; color:var(--accent-primary); }
.star-one { top:0; right:13%; font-size:40px; }
.star-two { bottom:12px; left:9%; font-size:34px; }
h2 { font-size:clamp(27px,2.7vw,36px); line-height:1.35; letter-spacing:-.035em; }
.section { padding-block:76px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:30px; }
.section-heading .eyebrow { margin-bottom:14px; }
.section-description { color:var(--text-secondary); font-size:14px; margin-top:12px; }
.collaboration-band { background:var(--bg-surface); border-block:1px solid var(--border-strong); }
.collaboration-layout { display:grid; grid-template-columns:210px 1fr; gap:30px; align-items:center; padding-block:35px; }
.collaboration-layout h2 { font-size:26px; }
.collaboration-layout .eyebrow { margin-bottom:8px; }
.collaboration-brief { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:0; }
.collaboration-brief > div { border-left:1px solid var(--border-strong); padding-left:23px; }
.collaboration-brief dt { color:var(--accent-primary); font-size:12px; margin-bottom:9px; }
.collaboration-brief dd { margin:0; font-size:14px; line-height:1.8; }
.rail-controls { display:flex; gap:8px; }
.rail-controls button { width:44px; height:44px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-strong); font-size:19px; }
.rail-controls button:hover { border-color:var(--accent-primary); }
.reference-rail { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 18px; scrollbar-width:thin; scrollbar-color:var(--accent-primary) var(--bg-elevated); }
.reference-card { flex:0 0 325px; scroll-snap-align:start; min-width:0; }
.reference-player { width:100%; height:578px; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:14px; overflow:hidden; }
.reference-player iframe { width:100%; height:100%; display:block; border:0; }
.reference-caption { padding:16px 2px 4px; }
.reference-caption a { display:flex; justify-content:space-between; align-items:center; min-height:32px; }
.reference-caption h3 { font-size:16px; font-weight:500; }
.reference-caption a > span { color:var(--text-secondary); font-size:11px; }
.reference-caption p { font-size:12px; color:var(--text-secondary); margin-top:5px; }
.experience-band { background:var(--bg-surface); border-block:1px solid var(--border-subtle); }
.experience-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:50px; align-items:center; padding-block:65px; }
.experience-copy { max-width:360px; }
.experience-copy > p:not(.eyebrow) { color:var(--text-secondary); margin-top:22px; font-size:17px; }
.app-steps { display:flex; list-style:none; counter-reset:step; padding:0; gap:18px; margin:28px 0; }
.app-steps li { counter-increment:step; color:var(--text-secondary); font-size:12px; }
.app-steps li::before { content:'0' counter(step); display:block; color:var(--accent-primary); font-size:11px; margin-bottom:5px; }
.demo-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:24px; }
.video-stage { width:100%; max-width:300px; margin:0 auto; }
.video-frame { border:1px solid var(--border-strong); border-radius:24px; overflow:hidden; background:var(--bg-deep); }
video { display:block; width:100%; height:auto; aspect-ratio:750/1460; object-fit:contain; }
.usage-section { border-bottom:1px solid var(--border-subtle); }
.usage-period { color:var(--text-secondary); font-size:12px; }
.usage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin:0; }
.usage-grid > div { border-top:1px solid var(--border-strong); padding-top:20px; }
.usage-grid dt { color:var(--text-secondary); font-size:13px; }
.usage-grid dd { margin:13px 0 8px; font-size:clamp(27px,3.2vw,43px); line-height:1.25; font-weight:500; letter-spacing:-.04em; white-space:nowrap; }
.usage-grid dd span { margin-left:5px; font-size:15px; color:var(--accent-primary); }
.usage-grid p { color:var(--text-secondary); font-size:11px; }
.usage-source { margin-top:24px; color:var(--text-secondary); font-size:11px; }
.usage-source summary { cursor:pointer; width:fit-content; padding-block:8px; }
.usage-source p { max-width:850px; margin-top:8px; }
.story-card { display:block; width:100%; text-align:left; padding:0; background:transparent; border-radius:12px; }
.card-art { display:block; position:relative; border-radius:10px; overflow:hidden; background:var(--bg-surface); border:1px solid var(--border-strong); }
.card-art img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; transition:transform .4s; }
.story-card:hover .card-art img { transform:scale(1.035); }
.card-category { position:absolute; left:8px; top:8px; background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--border-strong); border-radius:99px; padding:3px 8px; font-size:9px; }
.card-open { position:absolute; right:8px; bottom:8px; width:30px; height:30px; border:1px solid var(--border-strong); background:var(--bg-glass); border-radius:50%; display:grid; place-items:center; backdrop-filter:blur(12px); font-size:12px; }
.card-title { display:block; font-size:14px; line-height:1.4; margin-top:13px; font-weight:500; letter-spacing:-.015em; }
.company-band { background:var(--bg-surface); border-block:1px solid var(--border-subtle); }
.company-overview { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; padding-block:70px; }
.pixo-logo { object-fit:contain; object-position:left; width:125px; height:auto; max-height:44px; filter:brightness(0) invert(1); margin-bottom:25px; }
.company-heading h2 { font-size:31px; }
.company-heading > p:not(.eyebrow) { color:var(--text-secondary); font-size:14px; margin-top:20px; }
.company-heading .text-link { margin-top:17px; }
.company-facts dl { display:grid; grid-template-columns:1fr 1fr; gap:25px 40px; margin:0; }
.company-facts dl > div:first-child { grid-column:1/-1; border-bottom:1px solid var(--border-strong); padding-bottom:24px; }
.company-facts dt { color:var(--text-secondary); font-size:12px; margin-bottom:10px; }
.company-facts dd { font-size:51px; letter-spacing:-.04em; margin:0; line-height:1.1; }
.company-facts dd span { color:var(--accent-primary); }
.company-facts > p { font-size:10px; color:var(--text-secondary); margin-top:26px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.portfolio-grid > a { display:block; position:relative; border:1px solid var(--border-strong); border-radius:16px; padding:25px; background:var(--bg-surface); }
.portfolio-grid > a:hover { border-color:var(--accent-primary); }
.portfolio-grid img { width:56px; height:56px; object-fit:contain; border-radius:22%; margin-bottom:22px; }
.portfolio-grid h3 { font-size:17px; font-weight:500; }
.portfolio-grid p { color:var(--text-secondary); font-size:12px; margin-top:5px; }
.portfolio-grid a > span { position:absolute; top:24px; right:23px; color:var(--accent-primary); }
.final-contact { display:flex; align-items:center; justify-content:space-between; gap:35px; border-block:1px solid var(--border-strong); padding-block:45px; }
.final-contact h2 { font-size:29px; }
.final-contact p:not(.eyebrow) { font-size:14px; color:var(--text-secondary); margin-top:10px; }
.final-contact .eyebrow { margin-bottom:10px; }
.footer { display:flex; align-items:center; gap:22px; padding-block:28px 35px; font-size:10px; color:var(--text-secondary); }
.footer > div { margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.prototype-label { font-size:10px; border:1px solid var(--border-strong); border-radius:99px; padding:4px 10px; }
.mobile-contact { display:none; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:var(--accent-primary); color:var(--bg-deep); padding:12px; border-radius:6px; }
.skip-link:focus { top:10px; }
dialog { background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:20px; padding:0; max-height:90dvh; width:min(820px,calc(100% - 32px)); overflow:auto; }
dialog::backdrop { background:color-mix(in srgb,var(--bg-deep) 88%,transparent); backdrop-filter:blur(8px); }
.close-dialog { position:sticky; top:12px; margin:12px 12px -56px auto; z-index:2; width:44px; height:44px; display:grid; place-items:center; background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:50%; font-size:27px; }
.story-detail { display:grid; grid-template-columns:40% 60%; }
.story-detail > img { width:100%; height:100%; object-fit:cover; min-height:500px; }
.story-detail-copy { padding:70px 32px 35px; }
.story-detail-copy .eyebrow { margin-bottom:14px; }
.story-detail-copy h2 { font:400 35px/1.15 Georgia,serif; letter-spacing:-.025em; word-break:normal; }
.detail-summary { margin-top:24px; font-size:16px; line-height:1.8; }
.detail-tags { color:var(--accent-primary); font-size:12px; margin-top:16px; }
.story-detail-copy details { margin-block:24px; font-size:12px; color:var(--text-secondary); }
.story-detail-copy summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.original-description { font-size:13px; line-height:1.8; word-break:normal; white-space:pre-line; }
.story-detail-copy .button { width:100%; font-size:13px; gap:12px; }
.source-link { display:block; text-align:center; font-size:11px; color:var(--text-secondary); padding:14px 0 0; }
.contact-dialog { width:min(550px,calc(100% - 32px)); padding:0 36px 30px; }
.contact-dialog .close-dialog { right:-22px; margin-right:-22px; }
.contact-dialog > .eyebrow { padding-top:55px; margin-bottom:16px; }
.contact-dialog h2 { font-size:30px; margin-bottom:25px; }
.contact-dialog label { display:block; font-size:13px; margin:18px 0 7px; }
.contact-dialog label span { color:var(--text-secondary); font-size:11px; margin-left:5px; }
.contact-dialog input,.contact-dialog select,.contact-dialog textarea { display:block; width:100%; background:var(--bg-deep); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:10px; padding:12px; font-size:14px; min-height:48px; }
.contact-dialog textarea { resize:vertical; }
.contact-dialog input::placeholder,.contact-dialog textarea::placeholder { color:var(--text-secondary); opacity:.8; }
.contact-terms { font-size:11px; margin-block:18px; color:var(--text-secondary); }
.contact-dialog .button { width:100%; margin-top:9px; font-size:13px; }
#contact-feedback { margin-top:18px; font-size:12px; color:var(--text-secondary); }
.contact-address { color:var(--text-secondary); font-size:11px; margin-top:10px; }
.contact-address a { color:var(--text-primary); margin-left:8px; }
#manual-copy { margin-top:15px; }
@media (max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .header { padding-inline:32px; }
  .header nav { gap:18px; }
  .hero { min-height:550px; gap:15px; }
  .hero-art { height:420px; }
  .hero-main-cover { top:45px; }
  h1 { font-size:42px; }
  .hero-description { font-size:15px; }
  .hero-actions { gap:15px; }
  .hero-actions .button { font-size:12px; padding-inline:18px; gap:12px; }
  .collaboration-layout { grid-template-columns:160px 1fr; gap:20px; }
  .collaboration-brief { gap:16px; }
  .collaboration-brief > div { padding-left:16px; }
  .collaboration-brief dd { font-size:12px; }
  .company-overview { gap:40px; }
  .portfolio-grid > a { padding:20px; }
}
@media (max-width:800px) {
  .header nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:45px; text-align:center; gap:10px; }
  .hero-actions,.store-links { justify-content:center; }
  .hero-art { height:470px; width:min(500px,100%); margin:auto; }
  .hero-main-cover { top:20px; }
  .hero-cover { top:80px; }
  .collaboration-layout { grid-template-columns:1fr; gap:25px; padding-block:30px; }
  .collaboration-brief > div:first-child { border-left:0; padding-left:0; }
  .company-overview { grid-template-columns:1fr; gap:35px; padding-block:55px; }
  .company-facts dl { grid-template-columns:repeat(3,1fr); gap:25px; }
  .company-facts dl > div:first-child { grid-column:auto; border-bottom:0; padding-bottom:0; }
  .company-facts dd { font-size:43px; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .section { padding-block:60px; }
  .experience-layout { grid-template-columns:1fr; gap:30px; }
  .experience-copy { max-width:none; }
  .demo-pair { max-width:624px; width:100%; margin:auto; }
  .usage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .final-contact { flex-direction:column; text-align:center; gap:25px; }
  .footer { flex-wrap:wrap; }
  .footer > div { width:100%; margin:0; }
}
@media (max-width:560px) {
  body { padding-bottom:82px; }
  .wrap { width:calc(100% - 40px); }
  .header { height:72px; padding-inline:20px; gap:12px; }
  .brand img { width:73px; height:auto; }
  .brand span { display:none; }
  .header .button { font-size:11px; padding-inline:14px; gap:10px; }
  .hero { padding-top:30px; padding-bottom:15px; }
  .hero .eyebrow { font-size:9px; margin-bottom:20px; }
  h1 { font-size:clamp(30px,8.5vw,40px); line-height:1.3; }
  .hero-description { font-size:14px; margin-top:20px; }
  .hero-actions { flex-direction:column; gap:4px; margin-top:24px; }
  .hero-actions .button { font-size:13px; min-width:270px; }
  .hero-actions .text-link { font-size:11px; }
  .store-links { gap:22px; margin-top:10px; }
  .store-links a { font-size:11px; }
  .hero-art { height:102vw; max-height:405px; margin-top:12px; }
  .hero-main-cover { top:15px; width:56%; left:22%; }
  .cover-left { top:70px; left:3%; width:40%; }
  .cover-right { top:65px; right:3%; width:40%; }
  .star-one { font-size:27px; right:10%; }
  .star-two { font-size:25px; bottom:8px; }
  h2 { font-size:26px; }
  .eyebrow { font-size:9px; }
  .section { padding-block:48px; }
  .section-heading { gap:15px; margin-bottom:24px; }
  .section-description { font-size:12px; }
  .collaboration-brief { grid-template-columns:1fr; gap:16px; }
  .collaboration-brief > div,.collaboration-brief > div:first-child { display:grid; grid-template-columns:90px 1fr; gap:12px; border-left:0; padding:0; }
  .collaboration-brief dt { font-size:11px; margin:2px 0 0; }
  .collaboration-brief dd { font-size:13px; }
  .rail-controls { gap:5px; }
  .rail-controls button { width:40px; height:44px; font-size:16px; }
  #references .section-heading { align-items:flex-start; flex-wrap:wrap; }
  #references .section-heading > div:first-child { width:100%; }
  .reference-card { flex-basis:min(325px,100%); }
  .reference-player { height:auto; aspect-ratio:325/578; }
  .reference-caption p { font-size:11px; }
  .experience-layout { grid-template-columns:1fr; padding-block:48px; gap:30px; }
  .experience-copy { max-width:none; }
  .experience-copy > p:not(.eyebrow) { font-size:15px; margin-top:16px; }
  .app-steps { gap:22px; margin-block:23px; }
  .app-steps li { font-size:11px; }
  .demo-pair { grid-template-columns:1fr; gap:32px; }
  .video-stage { max-width:300px; }
  .usage-section .section-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .usage-period { font-size:11px; }
  .usage-grid { gap:24px 16px; }
  .usage-grid dt { font-size:11px; }
  .usage-grid dd { font-size:29px; }
  .usage-grid dd span { font-size:12px; }
  .usage-grid p { font-size:10px; }
  .card-title { font-size:13px; }
  .company-heading h2 { font-size:27px; }
  .company-heading > p:not(.eyebrow) { font-size:13px; }
  .company-heading > p br { display:none; }
  .company-facts dl { gap:16px; }
  .company-facts dt { font-size:10px; }
  .company-facts dd { font-size:36px; }
  .company-facts > p { font-size:10px; margin-top:20px; }
  .portfolio-grid { gap:13px; }
  .portfolio-grid > a { padding:20px 17px; }
  .portfolio-grid img { width:48px; height:48px; }
  .portfolio-grid h3 { font-size:15px; }
  .portfolio-grid p { font-size:11px; }
  .portfolio-grid a > span { top:16px; right:15px; }
  .portfolio-section .text-link { font-size:11px; }
  .final-contact { padding-block:36px; }
  .final-contact h2 { font-size:26px; }
  .final-contact p:not(.eyebrow) { font-size:13px; }
  .footer { gap:18px; padding-block:25px 30px; }
  .footer > div { gap:12px 20px; }
  .mobile-contact { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:10; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg-deep) 94%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--border-strong); }
  .mobile-contact .button { width:100%; font-size:13px; min-height:46px; }
  dialog { max-height:92dvh; }
  .story-detail { display:block; }
  .story-detail > img { min-height:0; width:100%; height:245px; object-position:center 27%; }
  .story-detail-copy { padding:25px; }
  .story-detail-copy h2 { font-size:30px; }
  .detail-summary { font-size:14px; margin-top:18px; }
  .story-detail-copy details { margin-block:17px; }
  .contact-dialog { padding-inline:24px; }
  .contact-dialog .close-dialog { right:-12px; margin-right:-12px; }
  .contact-dialog h2 { font-size:28px; }
  .contact-dialog input,.contact-dialog select,.contact-dialog textarea { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

.company-facts small { display:block; margin-top:10px; font-size:11px; line-height:1.6; color:var(--text-secondary); }
.company-facts .fact-text { font-size:26px; line-height:1.35; letter-spacing:-.025em; }
@media (max-width:560px) { .company-facts .fact-text { font-size:19px; } }
@media (max-width:560px) {
  .company-facts dl { grid-template-columns:1fr 1fr; gap:24px; }
  .company-facts dl > div:first-child { grid-column:1/-1; border-bottom:1px solid var(--border-strong); padding-bottom:24px; }
  .company-facts dl > div:first-child dd { white-space:nowrap; }
}



.story-rail { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:clamp(190px,22vw,250px); gap:20px; overflow-x:auto; padding:3px 3px 16px; scrollbar-width:none; overscroll-behavior-x:contain; }
.story-rail::-webkit-scrollbar { display:none; }
.story-rail:focus-visible { outline:2px solid var(--accent-primary); outline-offset:5px; }

.usage-spotlight { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.usage-spotlight .section-heading { margin:0; }
.usage-spotlight .usage-grid { grid-template-columns:1fr; }
.usage-spotlight .usage-grid > div { border-top:0; border-left:1px solid var(--border-strong); padding:0 0 0 48px; }
.usage-spotlight .usage-grid dt { min-height:0; }
.usage-spotlight .usage-grid dd { font-size:clamp(60px,7vw,88px); margin:10px 0 0; line-height:1; }
.usage-section.usage-spotlight .usage-grid dd span { font-size:.55em; }
@media (max-width:560px) {
  .usage-spotlight { grid-template-columns:1fr; gap:28px; }
  .usage-spotlight .usage-grid > div { border-left:0; padding:0; }
}

.application-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.button:disabled { opacity:.6; cursor:wait; }
#story-feedback { color:var(--text-secondary); font-size:14px; }
.detail-summary { white-space:pre-line; }

button.hero-cover { padding:0; overflow:hidden; background:var(--bg-surface); }
button.hero-cover img { width:100%; height:auto; }
.hero-main-cover { z-index:1; }