:root {
      --ink:#151412;
      --muted:#676058;
      --paper:#fffaf0;
      --cream:#f4ecdc;
      --line:rgba(21,20,18,.13);
      --dark:#171614;
      --brown:#3b3027;
      --copper:#b9854f;
      --gold:#d3ae65;
      --blue:#476b78;
      --green:#596f56;
      --red:#9b4b42;
      --warn:#b77c31;
      --shadow:0 22px 60px rgba(21,20,18,.13);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(circle at 2% -2%, rgba(185,133,79,.22), transparent 28rem),
        radial-gradient(circle at 100% 2%, rgba(71,107,120,.17), transparent 26rem),
        linear-gradient(180deg,#fbf7ee,#efe5d4 54%,#f8f2e7);
      font-variant-numeric:tabular-nums;
    }
    a { color:inherit; text-decoration:none; }
    .shell { width:min(100% - 32px,1500px); margin:0 auto; }
    header {
      position:sticky;
      top:0;
      z-index:20;
      border-bottom:1px solid rgba(21,20,18,.09);
      background:rgba(244,236,220,.92);
      backdrop-filter:blur(18px);
    }
    .topbar {
      display:grid;
      grid-template-columns:minmax(220px,.72fr) minmax(440px,1.25fr) auto;
      gap:.85rem;
      align-items:center;
      min-height:84px;
    }
    .brand { display:inline-flex; align-items:center; gap:.72rem; font-weight:950; letter-spacing:-.045em; }
    .mark {
      display:grid; place-items:center; width:42px; height:42px; border-radius:15px;
      color:var(--paper); background:linear-gradient(135deg,var(--dark),var(--brown));
      box-shadow:0 12px 34px rgba(59,48,39,.22);
    }
    .brand span span { display:block; color:var(--muted); font-size:.73rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .top-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
    .control,.field { display:grid; gap:.28rem; }
    label { color:rgba(21,20,18,.66); font-size:.72rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
    input,select,textarea {
      width:100%;
      min-height:42px;
      border:1px solid rgba(21,20,18,.16);
      border-radius:13px;
      background:rgba(255,250,240,.78);
      color:var(--ink);
      padding:.7rem .75rem;
      font:inherit;
      outline:none;
    }
    textarea { min-height:96px; resize:vertical; line-height:1.42; }
    input:focus,select:focus,textarea:focus { border-color:rgba(185,133,79,.62); box-shadow:0 0 0 3px rgba(185,133,79,.14); }
    button,.btn,.btn-secondary,.btn-ghost,.file-action {
      display:inline-flex; align-items:center; justify-content:center; min-height:42px;
      padding:.72rem .9rem; border-radius:999px; border:1px solid rgba(21,20,18,.16);
      background:rgba(255,250,240,.70); color:var(--ink); cursor:pointer;
      font-size:.78rem; font-weight:950; letter-spacing:.04em; text-transform:uppercase;
    }
    .btn { border-color:var(--dark); background:var(--dark); color:var(--paper); box-shadow:0 14px 34px rgba(21,20,18,.18); }
    .btn-secondary:hover,.btn-ghost:hover,.file-action:hover { background:rgba(185,133,79,.13); }
    .top-actions { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:flex-end; }
    main { padding:1rem 0 3rem; }
    .command-center,.app-layout,.panel,.drawer,.live-panel {
      border:1px solid rgba(21,20,18,.11);
      border-radius:28px;
      background:rgba(255,250,240,.73);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .command-center {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,.34fr);
      gap:1rem;
      padding:1rem;
    }
    .hero-panel {
      min-height:350px;
      padding:clamp(1.1rem,3vw,2rem);
      border-radius:24px;
      color:var(--paper);
      background:
        linear-gradient(145deg,rgba(21,20,18,.97),rgba(59,48,39,.93)),
        radial-gradient(circle at 96% 0%,rgba(211,174,101,.22),transparent 20rem);
    }
    .eyebrow { margin:0 0 .35rem; color:var(--blue); font-size:.76rem; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
    .hero-panel .eyebrow { color:#e6c77a; }
    h1,h2,h3,p { margin-top:0; }
    h1 { margin-bottom:.45rem; font-size:clamp(2.55rem,5.5vw,5.25rem); line-height:.88; letter-spacing:-.08em; }
    h2 { margin-bottom:.45rem; font-size:clamp(1.55rem,2.6vw,2.45rem); line-height:.96; letter-spacing:-.06em; }
    h3 { margin-bottom:.28rem; line-height:1.08; letter-spacing:-.035em; }
    .plain { color:rgba(21,20,18,.70); line-height:1.54; }
    .hero-panel .plain,.hero-panel .status-card small,.hero-panel .status-card span { color:rgba(255,250,240,.72); }
    .hero-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
    .hero-panel .btn-secondary { color:var(--paper); border-color:rgba(255,250,240,.18); background:rgba(255,250,240,.08); }
    .score-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
    .status-card,.mini-card,.source-card,.packet-card {
      border:1px solid rgba(21,20,18,.11);
      border-radius:20px;
      background:rgba(255,250,240,.69);
      padding:.85rem;
    }
    .hero-panel .status-card { border-color:rgba(255,250,240,.13); background:rgba(255,250,240,.07); }
    .status-card span,.mini-card span,.source-card span { display:block; color:rgba(21,20,18,.64); font-size:.76rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
    .status-card strong { display:block; margin-top:.18rem; font-size:clamp(1.3rem,2.4vw,2.05rem); line-height:.96; letter-spacing:-.065em; }
    .status-card small { display:block; margin-top:.26rem; color:rgba(21,20,18,.62); line-height:1.35; }
    .live-ticket { display:grid; gap:.5rem; align-content:start; padding:1rem; border-radius:24px; border:1px solid rgba(21,20,18,.10); background:rgba(255,250,240,.72); }
    .live-ticket strong { display:block; font-size:1.15rem; letter-spacing:-.04em; }
    .live-ticket span { color:rgba(21,20,18,.66); line-height:1.42; }
    .app-layout { margin-top:1rem; display:grid; grid-template-columns:270px minmax(0,1fr) 340px; min-height:760px; }
    .rail { border-right:1px solid rgba(21,20,18,.10); padding:.85rem; background:rgba(255,250,240,.36); }
    .rail button { width:100%; justify-content:flex-start; gap:.7rem; margin-bottom:.45rem; border-radius:18px; text-align:left; text-transform:none; letter-spacing:0; font-size:.92rem; }
    .rail button b { display:grid; place-items:center; width:34px; height:34px; border-radius:13px; background:rgba(185,133,79,.15); color:var(--brown); flex:0 0 auto; }
    .rail button span { display:grid; gap:.06rem; }
    .rail button small { color:rgba(21,20,18,.55); font-weight:780; }
    .rail button[aria-current="true"] { background:var(--dark); color:var(--paper); }
    .rail button[aria-current="true"] b { background:rgba(255,250,240,.14); color:#e6c77a; }
    .rail button[aria-current="true"] small { color:rgba(255,250,240,.68); }
    .workspace { display:grid; gap:.85rem; padding:.85rem; }
    .panel { display:none; padding:clamp(1rem,2vw,1.35rem); box-shadow:none; border-radius:24px; }
    .panel.active { display:block; }
    .panel-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:.9rem; }
    .panel-head p { margin-bottom:0; max-width:780px; }
    .form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; }
    .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .full { grid-column:1/-1; }
    .drawer { border-radius:0; border-width:0 0 0 1px; box-shadow:none; background:rgba(255,250,240,.52); padding:.85rem; }
    .drawer-section { border:1px solid rgba(21,20,18,.10); border-radius:20px; background:rgba(255,250,240,.68); padding:.85rem; margin-bottom:.75rem; }
    .drawer-section strong { display:block; letter-spacing:-.03em; }
    .drawer-section ul { margin:.45rem 0 0; padding-left:1.1rem; color:rgba(21,20,18,.68); line-height:1.42; }
    .output-grid,.source-grid,.packet-grid { display:grid; gap:.65rem; }
    .output-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:.85rem; }
    .source-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:.85rem; }
    .packet-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:.8rem; }
    .source-card strong,.mini-card strong { display:block; margin-top:.18rem; letter-spacing:-.035em; }
    .source-card p,.mini-card p,.packet-card span { margin:.25rem 0 0; color:rgba(21,20,18,.65); line-height:1.38; font-size:.92rem; }
    .packet-card { text-align:left; align-items:flex-start; border-radius:20px; min-height:120px; text-transform:none; letter-spacing:0; justify-content:flex-start; display:grid; gap:.28rem; }
    .packet-card[aria-pressed="true"] { background:var(--dark); color:var(--paper); border-color:var(--dark); }
    .packet-card[aria-pressed="true"] span { color:rgba(255,250,240,.72); }
    .file-row { display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; margin-top:.7rem; }
    .file-action input { display:none; }
    .import-box,.decision-box,.packet-output,.memory-list {
      margin-top:.8rem;
      border:1px solid rgba(21,20,18,.11);
      border-radius:20px;
      background:rgba(255,250,240,.66);
      padding:.9rem;
      line-height:1.45;
    }
    .import-box table { width:100%; border-collapse:collapse; font-size:.86rem; }
    .import-box th,.import-box td { border-bottom:1px solid rgba(21,20,18,.08); padding:.45rem; text-align:left; vertical-align:top; }
    .pill-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.55rem; }
    .pill { display:inline-flex; padding:.28rem .5rem; border-radius:999px; border:1px solid rgba(21,20,18,.11); background:rgba(255,250,240,.70); color:rgba(21,20,18,.68); font-size:.75rem; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
    .good { color:var(--green); }
    .warn { color:var(--warn); }
    .bad { color:var(--red); }
    @media (max-width:1180px) {
      .topbar,.command-center,.app-layout { grid-template-columns:1fr; }
      .drawer { border-left:0; border-top:1px solid rgba(21,20,18,.10); }
      .rail { border-right:0; border-bottom:1px solid rgba(21,20,18,.10); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
      .rail button { margin-bottom:0; }
      .form-grid,.form-grid.two,.form-grid.three,.score-grid,.output-grid,.source-grid,.packet-grid,.top-controls { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:680px) {
      .shell { width:min(100% - 20px,1500px); }
      h1 { font-size:clamp(2.3rem,15vw,4rem); }
      .form-grid,.form-grid.two,.form-grid.three,.score-grid,.output-grid,.source-grid,.packet-grid,.top-controls,.rail { grid-template-columns:1fr; }
      .panel-head { display:block; }
    }

:root {
      --ink:#141414;
      --muted:#686868;
      --paper:#f3f3f0;
      --cream:#fff;
      --line:#d7d7d2;
      --dark:#1d1d1d;
      --brown:#505050;
      --copper:#505050;
      --gold:#f7f7f4;
      --blue:#5c5c5c;
      --green:#2f2f2f;
      --red:#5c5c5c;
      --warn:#5c5c5c;
      --shadow:0 14px 32px rgba(20,20,20,.10);
    }
    body {
      background:linear-gradient(180deg,#ececea 0,#f3f3f0 255px),var(--paper);
      line-height:1.5;
    }
    header {
      background:
        radial-gradient(circle at 9% 16%,rgba(0,0,0,.16),transparent 28%),
        radial-gradient(circle at 82% 0%,rgba(0,0,0,.13),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.94),rgba(245,245,242,.88)),
        #fff;
      border-bottom:1px solid var(--line);
      box-shadow:0 6px 16px rgba(20,20,20,.07);
    }
    header:after {
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:4px;
      background:linear-gradient(90deg,#1d1d1d,#505050,#777);
      opacity:.82;
    }
    .topbar { min-height:82px; }
    .mark { border-radius:10px; background:linear-gradient(135deg,#1d1d1d,#505050); box-shadow:0 14px 32px rgba(20,20,20,.10); }
    .brand span span { color:#686868; }
    label { color:#686868; }
    input,select,textarea {
      border-color:rgba(20,20,20,.14);
      border-radius:8px;
      background:#fff;
    }
    input:focus,select:focus,textarea:focus {
      border-color:rgba(20,20,20,.42);
      box-shadow:0 0 0 3px rgba(20,20,20,.12);
    }
    button,.btn,.btn-secondary,.btn-ghost,.file-action {
      border-radius:8px;
      border-color:rgba(20,20,20,.14);
      background:#fff;
      color:#141414;
      letter-spacing:.02em;
    }
    .btn {
      background:linear-gradient(135deg,#1d1d1d,#505050);
      color:#fff;
      border-color:#1d1d1d;
      box-shadow:0 6px 16px rgba(20,20,20,.07);
    }
    .btn-secondary:hover,.btn-ghost:hover,.file-action:hover { background:#ededeb; }
    .command-center,.app-layout,.panel,.drawer,.live-panel {
      border-color:rgba(20,20,20,.11);
      border-radius:18px;
      background:#fff;
      box-shadow:0 14px 32px rgba(20,20,20,.10);
    }
    .command-center { padding:14px; }
    .hero-panel {
      border-radius:14px;
      background:
        radial-gradient(circle at 78% 4%,rgba(255,255,255,.11),transparent 24rem),
        linear-gradient(135deg,#171717,#262626);
    }
    .hero-panel .eyebrow { color:#d9d9d1; }
    .hero-panel .btn-secondary { color:#f7f7f4; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); }
    .score-grid { gap:10px; }
    .status-card,.mini-card,.source-card,.packet-card,.live-ticket,.drawer-section,.import-box,.decision-box,.packet-output,.memory-list {
      border-color:rgba(20,20,20,.11);
      border-radius:12px;
      background:#fbfbf9;
    }
    .hero-panel .status-card { border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.07); }
    .app-layout { grid-template-columns:270px minmax(0,1fr) 340px; }
    .rail { background:#f3f3f0; border-right:1px solid rgba(20,20,20,.10); }
    .rail button { border-radius:10px; }
    .rail button b { border-radius:8px; background:#ededeb; color:#1d1d1d; }
    .rail button[aria-current="true"] { background:#1d1d1d; color:#fff; }
    .rail button[aria-current="true"] b { background:rgba(255,255,255,.12); color:#fff; }
    .panel { border-radius:14px; }
    .pill { border-radius:8px; background:#fff; }
    .line-flow {
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
      margin-top:14px;
    }
    .line-flow span {
      min-height:42px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:8px;
      background:rgba(255,255,255,.08);
      color:#f7f7f4;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.78rem;
      font-weight:950;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .demo-controller,.export-hub {
      margin-top:1rem;
      border:1px solid rgba(20,20,20,.11);
      border-radius:18px;
      background:#fff;
      box-shadow:0 14px 32px rgba(20,20,20,.10);
      padding:14px;
    }
    .demo-controller[hidden] { display:none!important; }
    .demo-steps {
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:8px;
      margin-top:10px;
    }
    .demo-step {
      border:1px solid rgba(20,20,20,.11);
      border-radius:10px;
      background:#fbfbf9;
      padding:11px;
      text-align:left;
      cursor:pointer;
      font:inherit;
      min-height:92px;
    }
    .demo-step strong { display:block; line-height:1.1; }
    .demo-step span { display:block; margin-top:5px; color:#686868; font-size:.86rem; line-height:1.35; }
    .demo-step[aria-current="true"] { background:#1d1d1d; color:#fff; }
    .demo-step[aria-current="true"] span { color:rgba(255,255,255,.72); }
    .station-import-strip {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin:.75rem 0 .9rem;
      padding:10px;
      border:1px solid rgba(20,20,20,.10);
      border-radius:12px;
      background:#ededeb;
    }
    .station-import-strip span { color:#686868; font-size:.86rem; line-height:1.35; }
    .station-import-strip b { display:block; color:#141414; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
    .station-import-strip button { flex:0 0 auto; }
    .export-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px; }
    .export-card {
      border:1px solid rgba(20,20,20,.11);
      border-radius:12px;
      background:#fbfbf9;
      padding:12px;
    }
    .export-card strong { display:block; line-height:1.1; }
    .export-card p { margin:.45rem 0 0; color:#686868; font-size:.9rem; line-height:1.4; }
    .audit-list {
      margin-top:10px;
      border:1px solid rgba(20,20,20,.10);
      border-radius:12px;
      background:#fbfbf9;
      padding:12px;
      color:#686868;
      font-size:.92rem;
      line-height:1.42;
    }
    @media (max-width:1180px) {
      .app-layout { grid-template-columns:1fr; }
      .line-flow,.demo-steps,.export-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:680px) {
      .line-flow,.demo-steps,.export-grid { grid-template-columns:1fr; }
      .station-import-strip { display:grid; }
    }