:root{
  --bg:#0b0b0e;
  --surface:#141418;
  --surface-2:#1a1a1f;
  --surface-3:#202027;
  --text:#f4f4f1;
  --muted:#a4a4ad;
  --dim:#74747e;
  --line:#313139;
  --line-strong:#4a4a54;
  --paper:#f2f2ec;
  --header-h:72px;
  --footer-h:34px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  display:grid;
  grid-template-rows:var(--header-h) minmax(0,1fr) var(--footer-h);
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #f4f4f1;outline-offset:3px}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 24px;
  border-bottom:1px solid #242429;
  background:rgba(11,11,14,.94);
  backdrop-filter:blur(18px);
  position:relative;
  z-index:30;
}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand b{font-weight:850;letter-spacing:.09em;white-space:nowrap}
.brand span{font-weight:350;color:#b8b8bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;align-items:center;gap:8px;flex:none}
.actions button,.detail-tabs button,.x{
  border:1px solid #35353d;
  border-radius:999px;
  padding:9px 14px;
  color:var(--text);
  background:#17171b;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.actions button:hover,.detail-tabs button:hover,.x:hover{background:#24242a;border-color:#52525c}

#timelineShell{
  position:relative;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior:contain;
  touch-action:pan-x;
  cursor:grab;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.045),transparent 42%),
    linear-gradient(180deg,#0d0d10 0%,#0b0b0e 100%);
}
#timelineShell::-webkit-scrollbar{display:none}
#timelineShell.dragging{cursor:grabbing;user-select:none}
#timelineTrack{height:100%;position:relative;min-width:6200px}
.axis{position:absolute;left:0;right:0;top:56%;height:1px;background:linear-gradient(90deg,transparent,#303037 4%,#5b5b65 50%,#303037 96%,transparent)}
#monthLayer,#eventLayer{position:absolute;inset:0}
#monthLayer{pointer-events:none}
.month-tick{position:absolute;top:calc(56% - 9px);width:1px;height:18px;background:#4b4b54}
.month-label{position:absolute;top:calc(56% + 19px);transform:translateX(-50%);font-size:.75rem;font-style:normal;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#777781;white-space:nowrap}
.year-label{position:absolute;top:calc(56% + 47px);transform:translateX(-50%);font-size:clamp(2.5rem,5vw,4.6rem);font-weight:850;letter-spacing:-.055em;color:#1d1d22;white-space:nowrap}

.event{position:absolute;top:56%;width:320px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:4}
.event::before{content:"";position:absolute;bottom:15px;left:50%;width:1px;height:72px;background:#51515a;transform:translate(-50%,-100%);z-index:-1}
.event-dot{position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--paper);border:4px solid var(--bg);box-shadow:0 0 0 1px #72727c}
.event-card{
  position:absolute;
  bottom:42px;
  width:320px;
  padding:19px 19px 17px;
  border:1px solid #303037;
  border-radius:19px;
  background:linear-gradient(155deg,#1c1c21,#141418 70%);
  box-shadow:0 22px 65px rgba(0,0,0,.34);
  color:var(--text);
  text-align:left;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.event-card:hover{transform:translateY(-4px);border-color:#5b5b65;background:#1e1e24}
.event-card>span{display:block;margin-bottom:8px;color:#92929c;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.event-card h2{margin:0 0 9px;font-size:1.25rem;line-height:1.15;letter-spacing:-.02em}
.event-card>p{margin:0;color:#c3c3ca;font-size:.86rem;line-height:1.48;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.card-meta em{border:1px solid #393941;border-radius:999px;padding:5px 8px;color:#babac2;font-size:.7rem;font-style:normal;white-space:nowrap}
.card-meta strong{color:#ecece8;font-size:.75rem;white-space:nowrap}

.edge{position:fixed;top:var(--header-h);bottom:var(--footer-h);width:11vw;max-width:180px;z-index:8;pointer-events:none;opacity:.7}
.edge-left{left:0;background:linear-gradient(90deg,rgba(11,11,14,.72),transparent)}
.edge-right{right:0;background:linear-gradient(-90deg,rgba(11,11,14,.72),transparent)}
.hint{position:fixed;left:50%;bottom:calc(var(--footer-h) + 14px);transform:translateX(-50%);z-index:9;margin:0;color:#7e7e88;font-size:.75rem;white-space:nowrap;pointer-events:none}
.room-open .hint{opacity:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;border-top:1px solid #222227;background:#0b0b0e;color:#7f7f89;font-size:.72rem;position:relative;z-index:20}

.overlay[hidden]{display:none!important}
.overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 0,rgba(194,198,255,.13),transparent 43%),
    radial-gradient(ellipse at 50% 115%,rgba(119,103,177,.13),transparent 48%),
    linear-gradient(145deg,#111117,#08080c 72%);
}
.overlay::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.55;
  background:
    linear-gradient(90deg,transparent 7%,rgba(255,255,255,.055) 7.1%,transparent 7.25%,transparent 92.75%,rgba(255,255,255,.055) 92.9%,transparent 93%),
    linear-gradient(180deg,transparent 13%,rgba(255,255,255,.04) 13.1%,transparent 13.3%);
}
.overlay::after{
  content:"";
  position:absolute;
  left:-15%;right:-15%;bottom:-27%;height:55%;
  z-index:-1;
  transform:perspective(550px) rotateX(63deg);
  transform-origin:center top;
  opacity:.24;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.09) 90px 91px),
    repeating-linear-gradient(0deg,transparent 0 69px,rgba(255,255,255,.08) 70px 71px);
  mask-image:linear-gradient(to bottom,transparent,black 38%);
}
.idea-dialog{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100vw - 54px));
  height:100dvh;
  min-height:0;
  padding:32px 24px 20px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
}
.overlay .idea-dialog{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .42s ease .3s,transform .7s cubic-bezier(.16,1,.3,1) .22s}
.overlay.revealed .idea-dialog{opacity:1;transform:translateY(0) scale(1)}
.x{position:absolute;top:16px;right:16px;z-index:5;width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:1.5rem;line-height:1}
#ideaDetail{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.detail-head{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:end;padding:3px 54px 22px 2px}
.detail-head>div>span{display:block;margin-bottom:7px;color:#92929c;font-size:.75rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.detail-head h2{margin:0 0 9px;font-size:clamp(2.15rem,5vw,4rem);line-height:.95;letter-spacing:-.055em}
.detail-head p{max-width:720px;margin:0;color:#c8c8ce;font-size:1rem;line-height:1.48}
.record-seal{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:16px;border:1px solid #3a3a42;border-radius:15px;background:#111115}
.record-seal span{color:#85858f;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.record-seal strong{margin:6px 0;color:#f1f1ed;font-size:1.05rem;letter-spacing:.04em}
.record-seal small{color:#9898a1;font-size:.74rem}

.detail-tabs{display:flex;gap:7px;overflow-x:auto;padding:12px 1px;border-top:1px solid #2c2c33;border-bottom:1px solid #2c2c33;scrollbar-width:none}
.detail-tabs::-webkit-scrollbar{display:none}
.detail-tabs button{flex:none;padding:8px 12px;color:#9f9fa8;background:transparent;font-size:.78rem}
.detail-tabs button.active{border-color:#efefea;background:#efefea;color:#0d0d10;font-weight:800}
.tabview{min-height:0;overflow:auto;padding:18px 5px 22px 1px;overscroll-behavior:contain;scrollbar-color:#4a4a53 transparent;scrollbar-width:thin}
.tabview::-webkit-scrollbar{width:8px}.tabview::-webkit-scrollbar-thumb{background:#45454e;border-radius:99px}.tabview::-webkit-scrollbar-track{background:transparent}
.legal{margin:0;padding-top:11px;border-top:1px solid #2b2b32;color:#767680;font-size:.7rem;line-height:1.4}
.stacked{display:grid;gap:12px}

.summary-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.summary-card,.facts-grid article,.feature-grid article,.claims-list article,.model-grid article,.history article,.empty-state{border:1px solid #2f2f37;border-radius:16px;background:#18181d;padding:17px}
.summary-card>span,.facts-grid span,.model-grid>article>span,.history span{display:block;margin-bottom:8px;color:#878791;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.summary-card h3{margin:0 0 9px;font-size:1.4rem;letter-spacing:-.025em}
.summary-card p,.feature-grid p,.model-grid p,.history p,.empty-state p{margin:0;color:#c6c6cd;font-size:.88rem;line-height:1.58}
.summary-card.full{background:linear-gradient(135deg,#1a1a20,#151519)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.facts-grid strong{display:block;font-size:.93rem;line-height:1.35}

.figures-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pat-figure{margin:0;overflow:hidden;border:1px solid #33333b;border-radius:17px;background:#16161b}
.pat-figure img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff}
.pat-figure figcaption{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:13px 15px;align-items:start}
.pat-figure figcaption b{font-size:.78rem;white-space:nowrap}
.pat-figure figcaption span{color:#aaaab2;font-size:.77rem;line-height:1.45}

.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:feature}
.feature-grid article{position:relative;padding-left:54px;counter-increment:feature}
.feature-grid article::before{content:counter(feature,decimal-leading-zero);position:absolute;left:17px;top:18px;color:#686872;font-size:.7rem;font-weight:800;letter-spacing:.08em}
.feature-grid b{display:block;margin-bottom:7px;font-size:.95rem}
.claims-list{display:grid;gap:9px;counter-reset:claim}
.claims-list article{color:#d1d1d6;font-family:Georgia,"Times New Roman",serif;font-size:.95rem;line-height:1.62;background:#16161a}
.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.model-grid article{padding:21px;background:linear-gradient(150deg,#1d1d23,#151519)}
.model-grid h3{margin:0 0 15px;font-size:1.35rem;letter-spacing:-.03em}
.model-grid p{padding:7px 0;border-bottom:1px solid #2c2c33}
.model-grid p:last-child{border-bottom:0}
.history{display:grid;gap:0;padding-left:10px}
.history article{position:relative;margin-left:13px;padding:15px 18px 19px;border-width:0 0 0 1px;border-radius:0;background:transparent}
.history article::before{content:"";position:absolute;left:-5px;top:19px;width:9px;height:9px;border-radius:50%;background:#ededE8;box-shadow:0 0 0 5px #101014}
.history h3{margin:0 0 6px;font-size:1rem}
.empty-state{display:grid;place-items:center;min-height:210px;text-align:center}.empty-state strong{font-size:1.1rem}.empty-state p{margin-top:6px;color:#8e8e98}

.page-split{--split-x:50vw;--split-offset:-50vw;position:fixed;inset:0;z-index:200;overflow:hidden;pointer-events:none;perspective:1800px}
.page-wing{position:absolute;top:0;bottom:0;overflow:hidden;background:var(--bg);transition:transform .92s cubic-bezier(.76,0,.24,1),filter .92s ease;will-change:transform;backface-visibility:hidden}
.page-wing-left{left:0;width:calc(var(--split-x) + 1px);transform-origin:left center;box-shadow:22px 0 70px rgba(0,0,0,.72)}
.page-wing-right{left:var(--split-x);width:calc(100vw - var(--split-x) + 1px);transform-origin:right center;box-shadow:-22px 0 70px rgba(0,0,0,.72)}
.page-wing::before{content:"";position:absolute;top:0;bottom:0;width:22px;z-index:6;opacity:.72;background:linear-gradient(90deg,#08080b,#24242a 48%,#08080b);box-shadow:0 0 24px rgba(0,0,0,.7);transition:opacity .35s ease}
.page-wing-left::before{right:0}.page-wing-right::before{left:0}
.page-wing-left::after,.page-wing-right::after{display:none}
.page-wing-left::after{right:0}.page-wing-right::after{left:0}
.page-split.open .page-wing-left{transform:translateX(-101%) rotateY(-7deg);filter:brightness(.68)}
.page-split.open .page-wing-right{transform:translateX(101%) rotateY(7deg);filter:brightness(.68)}
.page-split.open .page-wing::before{opacity:1}
.page-split.open .page-wing::after{opacity:0}
.page-snapshot{position:absolute;top:0;width:100vw;height:100dvh;display:grid;grid-template-rows:var(--header-h) minmax(0,1fr) var(--footer-h);background:var(--bg)}
.page-wing-left .page-snapshot{left:0}
.page-wing-right .page-snapshot{left:var(--split-offset)}
.page-snapshot #timelineShell{min-height:0}
.page-snapshot button{pointer-events:none}
.snapshot-card-gap{visibility:hidden!important}

.portal-card{
  position:fixed;
  z-index:230;
  left:var(--portal-left);
  top:var(--portal-top);
  width:var(--portal-width);
  height:var(--portal-height);
  margin:0;
  overflow:hidden;
  border:1px solid #4a4a54;
  border-radius:19px;
  padding:19px;
  color:var(--text);
  text-align:left;
  background:
    radial-gradient(ellipse at 50% 0,rgba(194,198,255,.08),transparent 44%),
    linear-gradient(155deg,#1c1c21,#111115 70%);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  pointer-events:none;
  transform:translateZ(0);
  transform-origin:center;
  opacity:1;
  will-change:left,top,width,height,border-radius,opacity;
  transition:
    left .92s cubic-bezier(.76,0,.24,1),
    top .92s cubic-bezier(.76,0,.24,1),
    width .92s cubic-bezier(.76,0,.24,1),
    height .92s cubic-bezier(.76,0,.24,1),
    border-radius .92s cubic-bezier(.76,0,.24,1),
    border-color .5s ease;
}
.portal-card.open{
  left:0;
  top:0;
  width:100vw;
  height:100dvh;
  border-radius:0;
  border-color:transparent;
  animation:portal-card-open-fade .92s linear both;
  transition:
    left .92s cubic-bezier(.76,0,.24,1),
    top .92s cubic-bezier(.76,0,.24,1),
    width .92s cubic-bezier(.76,0,.24,1),
    height .92s cubic-bezier(.76,0,.24,1),
    border-radius .92s cubic-bezier(.76,0,.24,1),
    border-color .5s ease;
}
.portal-card.closing{animation:portal-card-close-fade .92s linear both}
.portal-card>span{display:block;margin-bottom:8px;color:#92929c;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:opacity .18s ease .56s,transform .32s ease .5s}
.portal-card h2{margin:0 0 9px;font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;transition:opacity .18s ease .56s,transform .32s ease .5s}
.portal-card>p{margin:0;color:#c3c3ca;font-size:.86rem;line-height:1.48;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:opacity .18s ease .56s,transform .32s ease .5s}
.portal-card .card-meta{transition:opacity .16s ease .56s,transform .3s ease .5s}
.portal-card.open>span,.portal-card.open h2,.portal-card.open>p,.portal-card.open .card-meta{opacity:0;transform:translateY(-12px)}
.portal-edge{position:absolute;top:0;bottom:0;width:4px;z-index:3;opacity:.75;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 24%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.16) 76%,transparent);box-shadow:none;transition:width .7s ease,opacity .18s ease .68s}
.portal-edge-left{left:0}.portal-edge-right{right:0}
.portal-card.open .portal-edge{width:18px;opacity:0}

@keyframes portal-card-open-fade{
  0%,30%{opacity:1}
  46%{opacity:.88}
  58%{opacity:.97}
  78%{opacity:.78}
  100%{opacity:0}
}
@keyframes portal-card-close-fade{
  0%{opacity:0}
  22%{opacity:.78}
  42%{opacity:.97}
  54%{opacity:.88}
  70%,100%{opacity:1}
}

@media (max-width:760px){
  :root{--header-h:108px;--footer-h:30px}
  header{display:grid;grid-template-rows:47px 53px;gap:0;padding:4px 12px}
  .brand{justify-content:space-between;gap:8px}.brand b{font-size:.88rem}.brand span{font-size:.78rem}
  .actions{display:grid;grid-template-columns:repeat(3,auto);justify-content:stretch;gap:5px}
  .actions button{padding:8px 8px;font-size:.7rem;white-space:nowrap}
  .event{width:265px}.event-card{width:265px;padding:16px}.event-card h2{font-size:1.1rem}.event-card>p{font-size:.8rem;-webkit-line-clamp:2}
  .card-meta strong{font-size:.7rem}
  .edge{top:var(--header-h);bottom:var(--footer-h);width:9vw}
  .hint{bottom:calc(var(--footer-h) + 10px);font-size:.68rem;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
  footer{padding:0 12px;font-size:.65rem}footer span:first-child{display:none}
  .overlay{padding:0}
  .idea-dialog{width:100vw;height:100dvh;border:0;border-radius:0;padding:19px 15px 13px}
  .x{top:12px;right:12px;width:38px;height:38px}
  .detail-head{grid-template-columns:1fr;padding:2px 46px 16px 0;gap:13px}
  .detail-head h2{font-size:2.45rem}.detail-head p{font-size:.9rem;line-height:1.43}
  .record-seal{display:none}
  .detail-tabs{margin:0 -15px;padding:10px 15px}.detail-tabs button{font-size:.73rem;padding:8px 10px}
  .tabview{margin:0 -3px;padding:14px 3px 18px}
  .summary-grid,.facts-grid,.figures-grid,.feature-grid,.model-grid{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-card,.facts-grid article,.feature-grid article,.claims-list article,.model-grid article{padding:14px}
  .feature-grid article{padding-left:46px}
  .feature-grid article::before{left:14px;top:15px}
  .pat-figure figcaption{grid-template-columns:1fr;gap:5px}
  .legal{font-size:.66rem}
  .page-wing-left{box-shadow:10px 0 35px rgba(0,0,0,.62)}
  .page-wing-right{box-shadow:-10px 0 35px rgba(0,0,0,.62)}
}

@media (max-width:390px){
  .brand span{max-width:155px}
  .actions button{padding-inline:6px}
  .facts-grid{grid-template-columns:1fr}
  .detail-head h2{font-size:2.15rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .portal-card.open{animation:none!important;opacity:0}
  .portal-card.closing{animation:none!important;opacity:1}
}
