/* Full-viewport Eye World. The renderer and selection controls are shared with /o1. */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000;color:#f5f5ef}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.o1-eyes{--eye-ink:#f5f5ef;--eye-muted:#b2b8aa;position:fixed;inset:0;min-height:100dvh;padding:0;background:#000;isolation:isolate}
.o1-eyes__inner{max-width:none;margin:0}
.o1-eyes__header,.o1-eyes__footer,.o1-eyes__preview-top{display:none}
.o1-eyes__studio{display:block}
.o1-eyes__preview{border:0;border-radius:0;box-shadow:none}
.o1-eyes__screen{position:absolute;inset:0;aspect-ratio:auto}
.o1-eyes__screen>[data-eye-preview]{object-fit:contain;padding:5rem 0 9rem}
.eye-stage__bar{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(1.25rem,env(safe-area-inset-top)) max(1.5rem,env(safe-area-inset-right)) 2rem max(1.5rem,env(safe-area-inset-left));background:linear-gradient(#000e,#0009,transparent);pointer-events:none}
.eye-stage__bar>*{pointer-events:auto}
.eye-stage__tools{display:flex;align-items:center;gap:.5rem}
.eye-device__lights{display:inline-flex;align-items:center;min-height:44px;color:#c8ff32;text-underline-offset:4px}
.eye-stage__bar h1{font-size:.85rem;letter-spacing:.2em;font-weight:600;line-height:1.5;margin:0 auto;text-align:center}
.eye-stage__bar h1 span{display:block;font-size:.62rem;letter-spacing:.05em;font-weight:400;color:#b4baa9}
.eye-stage__bar a,.eye-stage__bar button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff35;border-radius:999px;padding:0 1rem;background:#111c;color:#f5f5ef;text-decoration:none;font-size:.8rem;white-space:nowrap}
.o1-eyes__caption{position:absolute;z-index:2;bottom:max(3.5rem,calc(env(safe-area-inset-bottom) + 3rem));left:50%;transform:translateX(-50%);width:calc(100% - 3rem);max-width:43rem;display:flex;flex-direction:row;align-items:center;gap:1rem;background:#111e;border:1px solid #ffffff29;border-radius:1.2rem;padding:1rem 1.2rem;box-shadow:0 8px 40px #0008;backdrop-filter:blur(16px)}
.o1-eyes__caption strong{font-size:1rem}.o1-eyes__caption button{width:auto;max-width:none;border-radius:999px;font-size:.78rem;padding:.7rem 1rem}
.o1-eyes__caption [data-eye-customize]{background:#c8ff32;color:#172000;border-color:#c8ff32;font-weight:700}
.o1-eyes__motion{position:absolute;z-index:2;bottom:max(.9rem,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:44rem;padding:0;text-align:center;font-size:.68rem;color:#c0c5b8;text-shadow:0 1px 5px #000;background:#0009;border-radius:.5rem;line-height:1.4}
.eye-stage__status{position:absolute;z-index:3;top:max(5.5rem,calc(env(safe-area-inset-top) + 4.5rem));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 3rem);padding:.5rem .85rem;background:#121610ee;border:1px solid #ffffff29;border-radius:999px;text-align:center;pointer-events:none}
.o1-eyes__status{color:#d5e8b5;min-height:0;font-size:.75rem}.o1-eyes__status:empty{display:none}.o1-eyes__status[data-state=error]{color:#ffb8ae}
.eye-stage__status[data-quiet]{opacity:0}
.eye-device{padding:1rem;margin:0 0 1.5rem;background:#21291b;border:1px solid #58664a;border-radius:1rem}
.eye-device__heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.eye-device h3{font-size:.95rem;margin:0}.eye-device [data-device-badge]{font-size:.65rem;color:#bec5b4;border:1px solid #65715a;border-radius:999px;padding:.35rem .5rem}.eye-device [data-device-badge][data-connected=true]{color:#c8ff32;border-color:#c8ff32}
.eye-device p{font-size:.74rem;line-height:1.6;color:#c8cebf;margin:.75rem 0}.eye-device .eye-device__notice{font-size:.7rem;color:#e4ce9b}.eye-device .eye-device__note{font-size:.67rem;margin-bottom:0}
.eye-device button{min-height:44px;border:1px solid #748264;border-radius:.5rem;background:#303d23;color:#f5f5ef;font:600 .75rem/1.4 Arial,Helvetica,sans-serif;padding:.6rem .7rem}.eye-device__connection{display:flex;flex-wrap:wrap;gap:.5rem}.eye-device [data-device-connect]{flex:1}.eye-device__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.eye-device [data-device-save]{background:#c8ff32;border-color:#c8ff32;color:#172000}.eye-device [data-device-status]{color:#d5e8b5}.eye-device [data-device-status][data-state=error]{color:#ffb8ae}
.eye-device__live{display:flex;align-items:center;gap:.7rem;min-height:44px;margin-top:.75rem;cursor:pointer;font-size:.85rem;font-weight:600}.eye-device__live input{width:1.25rem;height:1.25rem;accent-color:#c8ff32;cursor:pointer}.eye-device__live:has(input:disabled){opacity:.6;cursor:default}.eye-device__actions:has([data-device-preview][hidden]){grid-template-columns:1fr}.o1-eyes__caption .eye-device__live-badge{display:block;font-size:.65rem;color:#bbc5ac;margin-top:.3rem}.o1-eyes__caption .eye-device__live-badge[data-connected=true]{color:#c8ff32}
.eye-stage__panel{box-sizing:border-box;position:fixed;inset:1rem 1rem 1rem auto;width:min(27rem,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);margin:0;padding:1.5rem;overflow-y:auto;overscroll-behavior:contain;background:#171c14;color:var(--eye-ink);border:1px solid #59624c;border-radius:1.5rem;box-shadow:0 20px 100px #000a}
.eye-stage__panel::backdrop{background:#0009;backdrop-filter:blur(5px)}
.eye-stage__panel-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.8rem}
.eye-stage__panel-bar p{font-size:.72rem;color:var(--eye-muted);margin:0 0 .55rem}.eye-stage__panel-bar h2{font-size:1.85rem;letter-spacing:-.04em;line-height:1.1}
.eye-stage__panel-bar button{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #68745b;background:transparent;color:#fff;border-radius:50%;font-size:1rem}
.o1-eyes__shape,.o1-eyes :is(select,input[type=text],input[type=url]),.o1-eyes__palette button{background:#252d20;color:#f5f5ef;border-color:#606a55}
.o1-eyes__shape:has(input:checked){background:#3a4928;border-color:#c8ff32}.o1-eyes__shape input{accent-color:#c8ff32}
.o1-eyes__shape img{display:block;width:36px;height:36px}.o1-eyes__shape small{font-size:.6rem}.o1-eyes__shape{gap:.45rem}
.o1-eyes input::placeholder{color:#b2b8aa}
.o1-eyes__actions button{border-color:#606a55}.o1-eyes__actions [data-eye-action=share],.o1-eyes__actions [data-eye-action=download]{background:#c8ff32;border-color:#c8ff32;color:#172000}
.o1-eyes__local-note{margin-top:1rem}.o1-eyes :is(input,select,button,a):focus-visible{outline-color:#c8ff32;outline-offset:3px}
@media(max-width:600px){.eye-stage__bar{gap:.6rem;padding:1rem 1rem 2rem}.eye-stage__bar h1{font-size:.7rem}.eye-stage__bar a,.eye-stage__bar button{font-size:.7rem;padding:0 .75rem}.o1-eyes__caption{width:calc(100% - 2rem);padding:.85rem;gap:.7rem;flex-wrap:wrap;bottom:max(4rem,calc(env(safe-area-inset-bottom) + 3.5rem))}.o1-eyes__caption>div:first-child{flex:1 1 100%}.o1-eyes__preview-actions{width:100%}.o1-eyes__caption button{flex:1;font-size:.75rem}.o1-eyes__motion{font-size:.62rem;bottom:max(1rem,env(safe-area-inset-bottom))}.eye-stage__panel{inset:auto 0 0;width:100%;max-height:calc(100dvh - max(1rem,env(safe-area-inset-top)));padding:1.2rem 1.2rem max(1.2rem,env(safe-area-inset-bottom));border-radius:1.5rem 1.5rem 0 0}.eye-stage__panel-bar{margin-bottom:1.3rem}.o1-eyes__shape small{font-size:.62rem}}
@media(max-height:500px) and (min-width:601px){.eye-stage__bar{padding-top:.6rem}.o1-eyes__caption{bottom:2rem;padding:.6rem .9rem;max-width:35rem}.o1-eyes__motion{bottom:.35rem}.eye-stage__status{top:4rem;font-size:.65rem}}
@media(forced-colors:active){.eye-stage__bar a,.eye-stage__bar button,.o1-eyes__caption,.eye-stage__panel{border:1px solid CanvasText}}
@media(max-width:600px){.eye-stage__bar{display:grid;grid-template-columns:1fr 1fr}.eye-stage__bar>a{justify-self:start}.eye-stage__bar h1{justify-self:end;margin:0}.eye-stage__tools{grid-column:1/-1;justify-content:flex-end}.eye-stage__status{top:max(8.5rem,calc(env(safe-area-inset-top) + 7.5rem))}}