:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#f4f4ff;background:#080a15}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% -20%,#302060 0,transparent 50%),#080a15}button,select,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.app{min-height:100vh;display:grid;grid-template-columns:290px minmax(0,1fr) 270px;grid-template-rows:auto minmax(550px,1fr);gap:14px;padding:16px;max-width:1900px;margin:auto}.top{grid-column:1/-1;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 15px;background:#14172bbd;border:1px solid #333653;border-radius:19px;flex-wrap:wrap}.brand{display:flex;gap:12px;align-items:center}.logo{display:grid;place-items:center;background:linear-gradient(135deg,#a859ff,#43c9ff);border-radius:13px;width:43px;height:43px;font-size:23px}.brand b{letter-spacing:.5px;font-size:18px}.brand small{display:block;color:#a3a8c4;font-size:11px;margin-top:3px}.topactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.chip,.btn{border:1px solid #404361;background:#22253d;color:#f7f5ff;padding:10px 13px;border-radius:11px}.btn.primary{background:linear-gradient(110deg,#655aff,#a33df1);border-color:#9585ff;font-weight:700}.btn.green{background:#1e755c;border-color:#44cda2}.btn:hover,.power:hover{filter:brightness(1.15)}.panel{background:#15182bdc;border:1px solid #323653;border-radius:19px;padding:16px;min-width:0}.panel h2{font-size:14px;margin:0 0 14px}.side{display:flex;flex-direction:column;gap:13px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#9f9dcf}.power{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #373957;background:#20243c;color:white;border-radius:13px;padding:12px;width:100%;margin-top:8px}.power.active{border-color:#9b7cff;background:linear-gradient(110deg,#423079,#25254a);box-shadow:0 0 18px #6f4ce32a}.power .ico{font-size:24px;width:33px;text-align:center}.power b{display:block;font-size:12px}.power small{display:block;color:#b1b3d1;font-size:10px;margin-top:4px}.stage{position:relative;border-radius:19px;border:1px solid #3d3b68;overflow:hidden;min-height:550px;background:#080b1b;isolation:isolate}.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.stage video{display:none}.stage .stagehead{position:absolute;top:16px;left:17px;right:17px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:8px}.status{background:#10182cbf;border:1px solid #444969;padding:8px 11px;border-radius:100px;font-size:11px;backdrop-filter:blur(8px)}.dot{display:inline-block;width:7px;height:7px;background:#ffc477;border-radius:50%;margin-right:7px}.dot.on{background:#46e2a3}.centerhint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);padding:10px 17px;background:#0c1026c7;border:1px solid #4a4b72;border-radius:100px;color:#d5d7f0;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;font-size:12px;pointer-events:none}.stagefoot{position:absolute;top:63px;left:17px;color:#a9add1;font-size:11px;pointer-events:none}.cam{position:absolute;bottom:65px;right:15px;width:170px;aspect-ratio:4/3;border-radius:12px;border:1px solid #6b6797;overflow:hidden;background:#11162d;box-shadow:0 12px 40px #0009}.cam video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.cam canvas{z-index:1;pointer-events:none}.camlabel{position:absolute;bottom:4px;left:7px;font-size:9px;text-shadow:0 1px 3px #000;z-index:2}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;font-size:12px;color:#d4d7f2}.row input[type=range]{width:115px;accent-color:#9165ff}.row select{max-width:135px;background:#242742;border:1px solid #494d72;border-radius:8px;color:#fff;padding:7px}.divider{height:1px;background:#353850;margin:16px 0}.tip{color:#adb0cd;font-size:11px;line-height:1.65}.tip b{color:#f5f5ff}.mini{font-size:10px;color:#8f94bb}.footer{font-size:10px;color:#9ea2c3;line-height:1.6}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{border:1px solid #383b5c;border-radius:11px;padding:12px;background:#1e2238}.stat strong{display:block;font-size:19px}.stat span{font-size:10px;color:#a9aecb}.switch{accent-color:#9871ff}.screenshot{width:100%;margin-top:8px}.hidden{display:none!important}@media(max-width:1100px){.app{grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto minmax(520px,1fr) auto}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.right .panel{min-width:0}.stage{min-height:520px}}@media(max-width:730px){.app{display:flex;flex-direction:column;padding:9px;gap:9px}.top{padding:10px}.brand b{font-size:15px}.side.left{display:block}.powers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.power{margin:0;padding:9px;gap:5px}.power .ico{font-size:19px;width:25px}.power small{font-size:9px}.stage{min-height:510px}.right{display:flex;flex-direction:column}.cam{width:118px;bottom:65px}.centerhint{font-size:10px}.stagefoot{font-size:10px}}

/* EHYONG site palette and responsive lab layout. */
:root{color:#f8f4ee;background:#050505;color-scheme:dark}body{background:radial-gradient(ellipse at 80% 0%,#d6ae6712,transparent 45%),#050505}a{color:inherit}button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.stage:focus-visible{outline:2px solid #f0d7a1;outline-offset:4px}.skip{position:absolute;top:-100px}.skip:focus{top:8px;left:8px;z-index:20;background:#111;padding:16px}.sitebar{max-width:1500px;margin:auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18;gap:24px}.sitebar img{object-fit:contain;display:block}.sitebar div{display:flex;gap:28px;font-size:13px}.sitebar a{text-decoration:none;color:#f0d7a1}.intro{max-width:1500px;margin:auto;padding:48px 32px 24px}.eyebrow{color:#d6ae67;font-size:11px;letter-spacing:2px}h1{font-size:clamp(38px,5vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1.05;margin:18px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:#f0d7a1}.intro>p:not(.eyebrow){color:#c6beb2;line-height:1.7}.device-note{font-size:13px;line-height:1.7;color:#c6beb2;padding:15px 18px;border-left:2px solid #d6ae67;background:#d6ae670a;max-width:850px}.device-note b{display:block;color:#f0d7a1}.app{max-width:1500px;padding:16px 32px 32px;grid-template-columns:240px minmax(0,1fr) 250px}.top,.panel{background:#111;border-color:#ffffff1a}.logo{background:linear-gradient(135deg,#f0d7a1,#d6ae67);color:#17120b}.brand small,.power small,.tip,.mini,.footer,.stat span{color:#c6beb2}.tip b{color:#f8f4ee}.btn,.chip,.power,.stat{background:#191816;border-color:#d6ae6738;color:#f8f4ee}.btn.primary{background:linear-gradient(135deg,#f0d7a1,#d6ae67);color:#17120b;border-color:#d6ae67}.power.active{background:linear-gradient(110deg,#d6ae672b,#191816);border-color:#d6ae67;box-shadow:none}.panel h2{font-size:15px}.power b{font-size:13px}.power small{font-size:11px}.tip,.footer{font-size:12px}.stage{border-color:#d6ae6755;background:#060606}.status,.centerhint{background:#12110ee6;border-color:#d6ae6744;color:#f0d7a1}.stagefoot{color:#c6beb2}.row{color:#c6beb2}.row input[type=range],.switch{accent-color:#d6ae67}.row select{background:#191816;border-color:#d6ae6744}.divider{background:#ffffff18}.btn{min-height:44px}.cam{border-color:#d6ae6766}.labfooter{max-width:1436px;margin:0 auto;padding:24px 0 40px;border-top:1px solid #ffffff18;color:#c6beb2;font-size:12px}.labfooter>a{color:#d6ae67;font-weight:800;letter-spacing:3px;text-decoration:none;margin-right:18px}.labfooter p{font-size:11px}.stage:fullscreen{width:100vw;height:100dvh;border-radius:0}.centerhint{white-space:normal;text-align:center;width:max-content;max-width:90%;border-radius:14px}.stagehead{flex-wrap:wrap}.status{font-size:10px}.stagefoot{top:88px}.row input[type=range]{min-height:36px}
@media(max-width:1200px){.app{grid-template-columns:220px minmax(0,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.row{flex-wrap:wrap}.labfooter{margin:0 32px}}
@media(max-width:730px){.app{display:flex;padding:12px}.sitebar{padding:12px 20px}.sitebar div{gap:14px;font-size:11px}.intro{padding:28px 20px 16px}.top{gap:16px}.topactions{width:100%;display:grid;grid-template-columns:1fr 1fr}.topactions .chip{text-align:center}.side.left{display:contents}.side.left>.panel:first-child{order:1}.stage{order:2;min-height:420px;height:65svh;max-height:600px}.side.left>.panel:last-child{order:3}.right{order:4;display:flex}.top{order:0}.power{min-height:64px}.cam{width:100px;bottom:80px}.brand b{font-size:14px}.labfooter{margin:0 20px}.labfooter span{display:block;margin-top:12px}.stagefoot{font-size:9px}.intro h1{font-size:clamp(36px,9vw,60px)}}