*{
      box-sizing:border-box;
      margin:0;
      padding:0;
      -webkit-tap-highlight-color:transparent;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
    }

    :root{
      --gold:#d7a74d;
      --gold-soft:#f1d18a;
      --gold-deep:#8a5d14;
      --gold-line:rgba(215,167,77,.22);
      --gold-glow:rgba(215,167,77,.45);
      --white-soft:rgba(255,255,255,.82);
      --glass:rgba(255,255,255,.05);
      --line:rgba(255,255,255,.10);
      --bg:#030303;
      --bg2:#0a0a0d;
      --shadow:0 30px 90px rgba(0,0,0,.72);
      --softShadow:0 14px 45px rgba(0,0,0,.55);
      --green:#8dffb1;
      --red:#ff5d82;
    }

    body{
      min-height:100vh;
      min-height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:22px;
      overflow:hidden;
      color:#fff;
      background:
        radial-gradient(circle at 20% 12%, rgba(241,209,138,.10), transparent 38%),
        radial-gradient(circle at 80% 15%, rgba(138,93,20,.15), transparent 42%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.03), transparent 45%),
        linear-gradient(180deg, #020202 0%, #050507 45%, #000000 100%);
    }

    #systemRoot{
      width:100%;
      min-height:100vh;
      min-height:100dvh;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }

    .stageGlow{
      position:fixed;
      inset:-30%;
      background:
        radial-gradient(circle at 30% 35%, rgba(215,167,77,.14), transparent 52%),
        radial-gradient(circle at 70% 55%, rgba(241,209,138,.08), transparent 58%),
        radial-gradient(circle at 50% 82%, rgba(255,255,255,.03), transparent 60%);
      filter: blur(24px);
      opacity:.85;
      pointer-events:none;
      animation: floatGlow 10s ease-in-out infinite;
    }

    @keyframes floatGlow{
      0%,100%{transform:translate3d(0,0,0) scale(1)}
      50%{transform:translate3d(8px,-10px,0) scale(1.02)}
    }

    .phone{
      width:min(420px,100%);
      aspect-ratio:9/19.5;
      border-radius:52px;
      background:
        linear-gradient(145deg, rgba(102,79,40,.88) 0%, rgba(40,33,22,.98) 12%, rgba(10,10,12,.99) 26%, rgba(7,7,8,.99) 74%, rgba(84,63,31,.92) 100%);
      border:1px solid rgba(243,222,177,.16);
      box-shadow:
        0 42px 120px rgba(0,0,0,.78),
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.45);
      position:relative;
      overflow:hidden;
      transform: translateZ(0);
    }

    .phone::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 16%, transparent 82%, rgba(0,0,0,.28)),
        linear-gradient(90deg, rgba(241,209,138,.20), transparent 16%, transparent 84%, rgba(241,209,138,.12)),
        radial-gradient(circle at 22% 10%, rgba(241,209,138,.22), transparent 28%),
        radial-gradient(circle at 76% 16%, rgba(255,255,255,.06), transparent 24%);
      pointer-events:none;
      opacity:.92;
    }

    .phone::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:44px;
      border:1px solid rgba(214,180,106,.28);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        inset 0 18px 28px rgba(255,255,255,.025),
        inset 0 -22px 30px rgba(0,0,0,.28);
      pointer-events:none;
    }

    .bezel{
      position:absolute;
      inset:13px;
      border-radius:41px;
      background:
        linear-gradient(180deg, rgba(7,7,9,.98), rgba(0,0,0,1) 22%, rgba(8,8,9,1) 100%);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.05);
      box-shadow:
        inset 0 0 0 1px rgba(215,167,77,.05),
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 24px rgba(0,0,0,.34);
    }

    .bezel::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 24px 36px rgba(255,255,255,.02);
      pointer-events:none;
      z-index:2;
    }

    .bezel::after{
      content:"";
      position:absolute;
      left:7%;
      right:7%;
      top:0;
      height:18%;
      background:linear-gradient(180deg, rgba(255,255,255,.045), transparent 78%);
      pointer-events:none;
      z-index:1;
    }

    .notch{
      position:absolute;
      top:13px;
      left:50%;
      transform:translateX(-50%);
      width:46%;
      height:31px;
      background:linear-gradient(180deg, rgba(12,12,14,.98), rgba(0,0,0,.98));
      border:1px solid rgba(255,255,255,.05);
      border-top:none;
      border-bottom-left-radius:22px;
      border-bottom-right-radius:22px;
      box-shadow:0 8px 18px rgba(0,0,0,.32);
      z-index:200;
      pointer-events:none;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }

    .camDot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(186,141,54,.42);
      box-shadow:0 0 12px rgba(215,167,77,.22);
    }

    .spk{
      width:70px;
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.11), rgba(255,255,255,.04));
    }

    .app{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      background:
        radial-gradient(circle at center, #16120d 0%, #090909 45%, #000 72%);
    }

    header{
      height:66px;
      padding:16px 14px 10px;
      padding-top:calc(16px + env(safe-area-inset-top));
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      background:rgba(6,6,8,.92);
      border-bottom:1px solid rgba(255,255,255,.07);
      backdrop-filter: blur(12px);
      z-index:60;
    }

    .brand{
      display:flex;
      flex-direction:column;
      gap:3px;
      line-height:1.08
    }

    .logo{
      font-weight:1000;
      font-size:1.06rem;
      letter-spacing:1.8px;
      text-transform:uppercase;
      background:linear-gradient(90deg,#fff7e5,var(--gold));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .sub{
      font-size:.63rem;
      color:rgba(255,255,255,.55);
      letter-spacing:2.4px;
      text-transform:uppercase;
    }

    .chips{
      display:flex;
      align-items:center;
      gap:8px
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      padding:8px 10px;
      border-radius:999px;
      font-size:.68rem;
      font-weight:950;
      letter-spacing:1px;
      text-transform:uppercase;
      color:#ddd;
      white-space:nowrap;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--gold-soft);
      box-shadow:0 0 12px rgba(241,209,138,.82);
      animation:pulse 1.5s infinite;
    }

    #wrap{
      flex:1;
      position:relative;
      overflow:hidden;
      padding-bottom:150px;
    }

    .grid{
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(215,167,77,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215,167,77,.045) 1px, transparent 1px);
      background-size:44px 44px;
      opacity:.85;
      pointer-events:none;
    }

    .noise{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.06;
      mix-blend-mode:screen;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
      background-size:220px 220px;
    }

    canvas{
      display:block;
      width:100%;
      height:100%;
    }

    .rings{
      position:absolute;
      left:50%;
      top:53%;
      width:min(520px,118%);
      aspect-ratio:1/1;
      transform:translate(-50%,-50%);
      pointer-events:none;
      z-index:15;
      filter:drop-shadow(0 0 20px rgba(215,167,77,.10));
      opacity:.95;
    }

    .ring{
      position:absolute;
      inset:0;
      border-radius:50%;
      border:1px solid rgba(215,167,77,.14);
      box-shadow:inset 0 0 30px rgba(215,167,77,.05);
      animation:rotate 20s linear infinite;
    }

    .ring:nth-child(2){
      inset:9%;
      border-color:rgba(241,209,138,.16);
      animation-duration:14s;
      animation-direction:reverse;
    }

    .ring:nth-child(3){
      inset:20%;
      border-color:rgba(255,255,255,.06);
      animation-duration:28s;
    }

    .ring::after{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:50%;
      border-top:2px solid rgba(241,209,138,.40);
      border-right:2px solid transparent;
      border-bottom:2px solid rgba(215,167,77,.10);
      border-left:2px solid transparent;
      opacity:.75;
    }

    .ticks{
      position:absolute;
      inset:30%;
      border-radius:50%;
      border:1px dashed rgba(215,167,77,.18);
      animation:rotate 9s linear infinite;
    }

    .beam{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:2px;
      background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
      box-shadow:0 0 18px rgba(215,167,77,.40);
      opacity:0;
      z-index:50;
    }

    .scanning .beam{
      opacity:1;
      animation:scan 1.1s ease-in-out infinite
    }

    .hud{
      position:absolute;
      left:12px;
      right:12px;
      top:10px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      z-index:55;
      pointer-events:none;
    }

    .hudCard{
      padding:12px 12px;
      border-radius:24px;
      background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:0 12px 34px rgba(0,0,0,.35);
      backdrop-filter:blur(12px);
      min-height:68px;
    }

    .hudCardRight{
      text-align:right;
    }

    .hudTitle{
      font-size:.60rem;
      letter-spacing:2.2px;
      text-transform:uppercase;
      color:rgba(255,255,255,.48);
    }

    .hudVal{
      margin-top:6px;
      font-weight:1000;
      font-size:1.02rem;
      color:#fff3d9;
    }

    .hudMini{
      margin-top:6px;
      font-size:.74rem;
      color:#bdb8ab;
    }

    .hudMini b{
      color:#fff;
    }

    .centerLabel{
      position:absolute;
      left:50%;
      top:12%;
      transform:translateX(-50%);
      z-index:35;
      text-align:center;
      width:min(380px,88vw);
      pointer-events:none;
    }

    .centerLabel .a{
      font-size:.62rem;
      letter-spacing:4px;
      text-transform:uppercase;
      color:rgba(255,255,255,.48);
    }

    .centerLabel .b{
      margin-top:7px;
      font-weight:1100;
      font-size:1.48rem;
      letter-spacing:1.2px;
      text-transform:uppercase;
      background:linear-gradient(90deg,#fff8e7,var(--gold));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .centerLabel .c{
      margin-top:11px;
      font-size:.81rem;
      color:#d5cfbf;
      opacity:.92;
      line-height:1.38;
    }

    .diag{
      position:absolute;
      left:12px;
      right:12px;
      bottom:170px;
      z-index:40;
      pointer-events:none;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(145deg, rgba(0,0,0,.28), rgba(255,255,255,.02));
      backdrop-filter:blur(12px);
      padding:12px;
      box-shadow:var(--softShadow);
    }

    .diag h4{
      font-size:.60rem;
      letter-spacing:2.4px;
      text-transform:uppercase;
      color:rgba(255,255,255,.50);
      margin-bottom:10px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .diag h4 b{
      color:var(--gold-soft);
    }

    .log{
      display:grid;
      gap:8px
    }

    .line{
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-weight:950;
      font-size:.82rem;
      padding:10px 10px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }

    .line small{
      font-weight:900;
      color:rgba(255,255,255,.42);
      letter-spacing:1px;
      text-transform:uppercase;
    }

    #controls{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      z-index:80;
      padding:14px 14px calc(14px + env(safe-area-inset-bottom));
      background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 26%, rgba(5,5,5,.96) 100%);
      border-top:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(14px);
    }

    .label{
      text-align:center;
      font-size:.60rem;
      color:rgba(255,255,255,.42);
      text-transform:uppercase;
      letter-spacing:2.8px;
      margin-bottom:10px;
    }

    .timeGrid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-bottom:10px;
    }

    .tbtn{
      height:44px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      color:#dbd7cc;
      font-weight:1100;
      font-size:.95rem;
      transition:transform .08s, box-shadow .2s, border-color .2s, background .2s, color .2s;
      user-select:none;
      position:relative;
      overflow:hidden;
    }

    .tbtn:active{
      transform:scale(.985)
    }

    .tbtn.active{
      background:rgba(215,167,77,.13);
      border-color:rgba(241,209,138,.62);
      color:#fff2cc;
      box-shadow:0 0 18px rgba(215,167,77,.12);
    }

    .row{
      display:flex;
      gap:10px;
      margin-bottom:10px
    }

    .input{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:7px;
      padding:12px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
    }

    .input label{
      font-size:.58rem;
      color:rgba(255,255,255,.45);
      letter-spacing:2.4px;
      text-transform:uppercase;
    }

    .input input{
      height:44px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.34);
      color:#fff;
      border-radius:18px;
      padding:0 12px;
      font-weight:1100;
      font-size:1rem;
      outline:none;
      text-transform:uppercase;
    }

    .inputHint{
      align-self:flex-start;
      border:none;
      background:transparent;
      color:rgba(241,209,138,.78);
      font-size:.68rem;
      letter-spacing:1.2px;
      font-weight:900;
      padding:0;
      cursor:pointer;
      text-transform:uppercase;
    }

    .inputHint[hidden]{
      display:none;
    }

    .inputMsg{
      min-height:18px;
      font-size:.72rem;
      color:rgba(255,255,255,.45);
    }

    .inputMsg[data-state="error"]{
      color:#ff9db4;
    }

    .inputMsg[data-state="success"]{
      color:#9dffc5;
    }

    .inputMsg[data-state="warn"]{
      color:#f1d18a;
    }

    .cta{
      width:100%;
      height:54px;
      border:none;
      border-radius:22px;
      font-weight:1200;
      font-size:1.02rem;
      letter-spacing:1.6px;
      text-transform:uppercase;
      color:#120c02;
      background:linear-gradient(90deg,#f2d38f,#d7a74d,#b98026);
      box-shadow:0 14px 34px rgba(215,167,77,.20);
      position:relative;
      overflow:hidden;
      transition:transform .08s, opacity .2s;
    }

    .cta:active{
      transform:scale(.985)
    }

    .cta:disabled{
      background:#2a2a2a;
      color:#5a5a5a;
      box-shadow:none;
      opacity:.75
    }

    .cta::after{
      content:"";
      position:absolute;
      top:0;
      left:-120%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
      transition:.55s;
    }

    .cta:active::after{
      left:120%;
      transition:0s
    }

    .loader{
      position:absolute;
      inset:0;
      z-index:120;
      background:rgba(0,0,0,.92);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }

    .loader.is-hidden{
      display:none;
    }

    .radar{
      width:88px;
      height:88px;
      border-radius:50%;
      border:2px solid var(--gold);
      position:relative;
      margin-bottom:18px;
    }

    .radar:before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      border-top:2px solid transparent;
      border-right:2px solid transparent;
      border-bottom:2px solid rgba(241,209,138,.55);
      border-left:2px solid rgba(215,167,77,.55);
      animation:spin 1s linear infinite;
    }

    .radar:after{
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      width:44px;
      height:44px;
      border-radius:50%;
      background:rgba(215,167,77,.18);
      transform:translate(-50%,-50%);
      animation:radarpulse 1.45s infinite;
    }

    .loading{
      color:#f4d58d;
      font-weight:1200;
      letter-spacing:3px;
      text-transform:uppercase;
      font-size:.88rem;
      animation:flicker 3s infinite;
      text-align:center;
      padding:0 18px;
    }

    .loading small{
      display:block;
      margin-top:10px;
      color:rgba(255,255,255,.48);
      letter-spacing:2px;
      text-transform:none;
    }

    @keyframes pulse{
      0%{opacity:.5}
      50%{opacity:1}
      100%{opacity:.5}
    }

    @keyframes rotate{
      to{transform:rotate(360deg)}
    }

    @keyframes scan{
      0%{top:0%;opacity:0}
      50%{opacity:1}
      100%{top:100%;opacity:0}
    }

    @keyframes spin{
      to{transform:rotate(360deg)}
    }

    @keyframes radarpulse{
      0%{transform:translate(-50%,-50%) scale(.55);opacity:1}
      100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}
    }

    @keyframes flicker{
      0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
      20%,24%,55%{opacity:.55}
    }

    @media (max-width:920px) and (orientation:landscape){
      body{padding:12px}
      .phone{
        width:min(92vw,980px);
        height:min(92vh,520px);
        aspect-ratio:auto;
        border-radius:38px;
      }
      .phone::after{inset:7px;border-radius:31px}
      .bezel{inset:10px;border-radius:31px}
      .notch{display:none}
      header{
        height:58px;
        padding:12px 14px 10px;
        padding-top:12px;
      }
      #wrap{padding-bottom:128px}
      .rings{top:54%;width:min(560px,70vh)}
      .centerLabel{top:50%;width:min(520px,64vw)}
      .diag{
        bottom:140px;
        left:12px;
        right:12px;
        max-width:520px;
        margin:0 auto;
      }
      #controls{padding:12px}
      .timeGrid{
        grid-template-columns:repeat(6,1fr);
        gap:8px;
      }
      .tbtn{height:40px;font-size:.9rem;border-radius:16px}
      .row{margin-bottom:8px}
      .input{padding:10px;border-radius:18px}
      .input input{height:40px;border-radius:16px}
      .cta{height:48px;border-radius:20px}
    }

    @media (max-width:640px) and (orientation:portrait){
      body{
        padding:0;
        background:
          radial-gradient(circle at 50% 0%, rgba(241,209,138,.12), transparent 32%),
          radial-gradient(circle at 50% 78%, rgba(255,255,255,.03), transparent 40%),
          linear-gradient(180deg, #020202 0%, #050507 45%, #000000 100%);
      }
      #systemRoot{
        min-height:100dvh;
      }
      .stageGlow{
        inset:-18%;
        filter:blur(18px);
        opacity:.72;
      }
      .phone{
        width:100vw;
        height:100dvh;
        aspect-ratio:auto;
        border:none;
        border-radius:0;
        box-shadow:none;
        background:transparent;
      }
      .phone::before,
      .phone::after{
        display:none;
      }
      .bezel{
        inset:0;
        border:none;
        border-radius:0;
        box-shadow:none;
        background:linear-gradient(180deg, rgba(7,7,9,.98), rgba(0,0,0,1) 22%, rgba(8,8,9,1) 100%);
      }
      .notch{
        display:none;
      }
      header{
        height:auto;
        min-height:72px;
        padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
        align-items:flex-start;
        gap:12px;
      }
      .brand{
        padding-top:2px;
      }
      .chips{
        flex-wrap:wrap;
        justify-content:flex-end;
        gap:6px;
        max-width:48%;
      }
      .chip{
        padding:7px 9px;
        font-size:.62rem;
        letter-spacing:.9px;
      }
      #wrap{
        padding-bottom:186px;
      }
      .hud{
        left:10px;
        right:10px;
        top:12px;
        gap:8px;
      }
      .hudCard{
        min-height:64px;
        padding:11px 10px;
        border-radius:22px;
      }
      .hudTitle{
        font-size:.55rem;
        letter-spacing:2px;
      }
      .hudVal{
        font-size:.95rem;
      }
      .hudMini{
        font-size:.70rem;
      }
      .rings{
        top:48%;
        width:min(440px,116vw);
      }
      .centerLabel{
        top:15%;
        width:min(310px,84vw);
      }
      .centerLabel .a{
        font-size:.56rem;
        letter-spacing:3.2px;
      }
      .centerLabel .b{
        font-size:1.24rem;
      }
      .centerLabel .c{
        margin-top:8px;
        font-size:.74rem;
        line-height:1.32;
      }
      .diag{
        left:10px;
        right:10px;
        bottom:182px;
        padding:10px;
        border-radius:22px;
      }
      .diag h4{
        margin-bottom:8px;
        font-size:.56rem;
      }
      .log{
        gap:7px;
      }
      .line{
        padding:9px 10px;
        border-radius:16px;
        font-size:.76rem;
      }
      .line small{
        font-size:.56rem;
        letter-spacing:.8px;
      }
      #controls{
        padding:12px 12px calc(12px + env(safe-area-inset-bottom));
      }
      .label{
        margin-bottom:8px;
        font-size:.56rem;
        letter-spacing:2.2px;
        line-height:1.3;
      }
      .timeGrid{
        gap:8px;
        margin-bottom:8px;
      }
      .tbtn{
        height:42px;
        border-radius:16px;
        font-size:.86rem;
      }
      .row{
        margin-bottom:8px;
      }
      .input{
        gap:6px;
        padding:10px;
        border-radius:20px;
      }
      .input label{
        font-size:.56rem;
        letter-spacing:2px;
      }
      .input input{
        height:42px;
        border-radius:16px;
        font-size:.94rem;
      }
      .inputMsg{
        min-height:16px;
        font-size:.68rem;
      }
      .cta{
        height:50px;
        border-radius:18px;
        font-size:.95rem;
      }
      .loading{
        font-size:.82rem;
      }
    }

    @media (min-width:921px){
      .phone{transform:scale(.98)}
    }

    @media (prefers-reduced-motion: reduce){
      .ring,.ticks,.dot,.stageGlow{animation:none !important}
      .scanning .beam{animation:none !important}
    }