:root{--cyan:#4de8ff;--blue:#177cff;--ink:#02060f;--panel:rgba(8,20,38,.86);--line:rgba(100,225,255,.2);--muted:#9eb4c9;--talk:.15;--look-x:0px;--look-y:0px}
    *{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body{overflow:hidden;background:#02060f;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
    button,a,input{font:inherit}button,a{touch-action:manipulation}.bg{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,rgba(13,115,190,.16),transparent 44%),linear-gradient(#02060f,#000);z-index:-2}.grid{position:fixed;inset:0;opacity:.16;background-image:linear-gradient(rgba(77,232,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(77,232,255,.13) 1px,transparent 1px);background-size:72px 72px;transform:perspective(500px) rotateX(58deg) scale(1.8) translateY(30%);z-index:-1;animation:grid 14s linear infinite}@keyframes grid{to{background-position:0 72px}}
    .app{margin: auto; height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));gap:12px}.topbar{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:5}.brand{display:flex;gap:10px;align-items:center;font-weight:750;letter-spacing:.06em}.status-dot{width:10px;height:10px;border-radius:50%;background:#718196;box-shadow:0 0 0 5px rgba(113,129,150,.12)}.status-dot.on{background:#3ef28b;box-shadow:0 0 16px #3ef28b}.tools{display:flex;gap:8px}.icon-btn{opacity: 0; width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:rgba(7,20,37,.75);color:#d9f9ff;cursor:pointer}.icon-btn:hover,.icon-btn:focus-visible{background:rgba(31,128,177,.22);outline:2px solid var(--cyan);outline-offset:2px}
    main{min-height:0;display:grid;place-items:center}.welcome{max-width:720px;text-align:center;padding:26px}.welcome h1{font-size:clamp(34px,6vw,68px);margin:0 0 10px}.welcome p{color:var(--muted);font-size:clamp(16px,2vw,21px);line-height:1.55}.primary{border:1px solid rgba(77,232,255,.55);border-radius:999px;padding:14px 28px;background:linear-gradient(135deg,rgba(23,124,255,.42),rgba(77,232,255,.14));color:#dffcff;font-weight:800;cursor:pointer;box-shadow:0 0 34px rgba(37,183,255,.18)}.primary:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(37,183,255,.35)}
    .robot-stage{display:none;width:100%;height:100%;min-height:0;position:relative;place-items:center}.running .robot-stage{display:grid}.running .welcome{display:none}.face{display:grid;gap:clamp(18px,3vh,34px);place-items:center;transform:translateY(-2vh)}.eyes{display:flex;gap:clamp(48px,10vw,150px);align-items:center}.eye{position:relative;width:clamp(180px,26vw,320px);aspect-ratio:1/1.08;border-radius:50%/56%;overflow:hidden;background:radial-gradient(120% 120% at 50% 40%,rgba(255,255,255,.16),transparent 45%),radial-gradient(90% 95% at 50% 55%,rgba(0,160,255,.3),rgba(0,35,75,.25) 58%,rgba(0,0,0,.05));box-shadow:0 0 0 2px rgba(10,120,210,.35) inset,0 0 0 1px rgba(140,240,255,.1) inset,0 0 26px 8px rgba(0,160,255,.25),0 0 80px 20px rgba(0,120,255,.14);animation:eyePulse 2.8s ease-in-out infinite}.eye::before{content:"";position:absolute;inset:-20%;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(0,170,255,.35),rgba(0,170,255,.1) 45%,transparent 70%);filter:blur(10px);opacity:.9}.eye::after{content:"";position:absolute;inset:8%;border-radius:inherit;background:repeating-linear-gradient(to bottom,rgba(170,255,255,.98) 0 10px,rgba(20,160,255,.2) 10px 19px),radial-gradient(120% 110% at 50% 55%,rgba(255,255,255,.08),rgba(0,50,120,.22) 55%,rgba(0,0,0,.38));background-position:0 0,0 0;filter:saturate(1.25) contrast(1.12);box-shadow:0 0 16px 6px rgba(0,190,255,.22) inset,0 0 24px 10px rgba(0,180,255,.12);animation:eyeScan 1.8s ease-in-out infinite alternate}.speaking .eye::after{filter:saturate(1.6) contrast(1.25);box-shadow:0 0 20px 8px rgba(0,210,255,.4) inset,0 0 34px 13px rgba(0,190,255,.28);animation-duration:.5s}.iris{display:none}.eyes.blink .eye{animation:blink .18s ease-in-out}@keyframes blink{0%{transform:scaleY(1)}45%{transform:scaleY(.06)}100%{transform:scaleY(1)}}@keyframes eyeScan{from{background-position:0 -9px,0 0}to{background-position:0 9px,0 0}}@keyframes eyePulse{0%,100%{scale:1}50%{scale:1.012}}
    .mouth{width:clamp(210px,37vw,470px);height:clamp(46px,8vh,90px);border:1px solid rgba(77,232,255,.3);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:5px;padding:15px 30px;background:rgba(9,63,105,.18);box-shadow:inset 0 0 24px rgba(77,232,255,.1),0 0 28px rgba(23,124,255,.14)}.bar{width:4%;height:15%;border-radius:10px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.speaking .bar{animation:wave .48s ease-in-out infinite alternate}.speaking .bar:nth-child(2n){animation-delay:-.18s}.speaking .bar:nth-child(3n){animation-delay:-.32s}@keyframes wave{to{height:calc(35% + var(--talk)*55%)}}
    .state{display: none; text-align:center}.state strong{display:block;color:var(--cyan);font-size:clamp(16px,2vw,22px);letter-spacing:.16em;text-transform:uppercase}.state span{display:block;color:var(--muted);margin-top:8px;min-height:1.4em;max-width:min(760px,90vw)}.replay-btn{margin-top:14px}
    .tiles{position:fixed;inset:82px 18px 22px;pointer-events:none}.tile{position:absolute;width:clamp(125px,16vw,220px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid rgba(77,232,255,.3);background:#06101e;box-shadow:0 0 35px rgba(0,151,255,.13);pointer-events:auto;color:#fff;text-decoration:none;isolation:isolate;transition:.2s}.tile:hover,.tile:focus-visible{transform:scale(1.045);outline:2px solid var(--cyan);outline-offset:4px}.tile:nth-child(1){left:0;top:0}.tile:nth-child(2){left:0;bottom:0}.tile:nth-child(3){right:0;top:0}.tile:nth-child(4){right:0;bottom:0}.tile video{width:100%;height:100%;object-fit:cover;opacity:.66}.tile span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:18px;background:radial-gradient(transparent,rgba(0,0,0,.5));font-weight:850;letter-spacing:.08em;font-size:clamp(12px,1.4vw,17px);z-index:2;text-shadow:0 2px 15px #000}
    .bottom{display:flex;justify-content:center;position:relative;z-index:7}.subtitles{max-width:min(850px,95vw);min-height:52px;padding:10px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(5,16,31,.7);text-align:center;backdrop-filter:blur(12px);color:#e8fbff}.subtitles:empty{visibility:hidden}
    dialog{width:min(620px,calc(100% - 28px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:22px;background:#071321;color:#fff;padding:0;box-shadow:0 24px 90px #000}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.panel-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:#071321;border-bottom:1px solid var(--line)}.panel-head h2{margin:0}.panel{padding:20px;display:grid;gap:18px}.field{display:grid;gap:7px;color:#cce4ef}.field input[type=range]{width:100%}.field input[type=text],.field select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:#0c2034;color:#fff}.checks{display:flex;gap:18px;flex-wrap:wrap}.small{font-size:13px;color:var(--muted);line-height:1.5}.danger{color:#ff9d9d}
    #camera{position:fixed;width:2px;height:2px;opacity:.01;pointer-events:none}.toast{position:fixed;top:76px;left:50%;transform:translate(-50%,-10px);padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#0a1b2c;opacity:0;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
    @media(max-width:820px){.tiles{inset:76px 10px 90px}.tile{width:clamp(92px,24vw,140px)}.face{transform:none}.eye{width:clamp(105px,30vw,180px)}.tiles .tile:nth-child(2),.tiles .tile:nth-child(4){bottom:0}.brand span:last-child{display:none}}
    @media(max-width:540px){.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;inset:auto 10px 82px}.tile,.tile:nth-child(n){position:relative;inset:auto;width:100%;border-radius:16px;aspect-ratio:1}.tile span{font-size:9px;padding:4px}.eye{width:34vw}.eyes{gap:8vw}.mouth{width:58vw}.face{margin-top:-18vh}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
    footer {
      display: none!important;
    }
    .welcome-info1 {
      display: none;
    }