@font-face{font-family:lij-display;src:url('./shared/main-font.otf') format('opentype');font-display:swap}
@font-face{font-family:good-timing;src:url('./shared/good-timing-bd.otf') format('opentype');font-display:swap}
:root{font-family:Tahoma,Verdana,sans-serif}
body{background:#040811 url('./shared/desktop-background.webp') center top/cover no-repeat fixed}
body:before{background:linear-gradient(180deg,rgba(1,6,12,.38),rgba(3,6,10,.58)),radial-gradient(circle at center,transparent 22%,rgba(0,0,0,.28) 100%),repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);opacity:1;z-index:0}
.site-shell{position:relative;z-index:1;--shell-edge:#cdd3db;--shell-face:#adb7c3;--shell-face-dark:#8f9aa7;--titlebar-top:#d9e0e7;--titlebar-bottom:#9aa6b4;--panel-copy:#243445;--panel-soft:#31485b;--button-top:#f2f6fa;--button-bottom:#bdccd9}
.site-shell[data-theme=dark]{--shell-edge:#7b8392;--shell-face:#7f8997;--shell-face-dark:#636c79;--titlebar-top:#adb4bd;--titlebar-bottom:#747f8d;--panel-copy:#edf3ff;--panel-soft:#d2def4;--button-top:#9daaba;--button-bottom:#667788}
.brand{font-family:good-timing,Tahoma,sans-serif;letter-spacing:-.06em;font-size:clamp(27px,3vw,40px);text-shadow:0 2px 12px #000}.brand-dot{color:#c4d4e4}.brand-mark,.header-right{display:none}
.window{background:linear-gradient(180deg,var(--shell-edge),var(--shell-face) 50%,var(--shell-face-dark));border:1px solid rgba(255,255,255,.46);border-radius:24px;box-shadow:0 20px 45px #0005,inset 0 1px #fffb,inset 0 -2px #3c485644;color:var(--panel-copy);transition:background .3s,color .3s}
.titlebar{background:linear-gradient(180deg,var(--titlebar-top),var(--titlebar-bottom));border-bottom:1px solid #606e7f73;color:var(--panel-soft);height:35px}
.desktop-grid{grid-template-columns:minmax(210px,250px) minmax(480px,1fr) minmax(275px,350px);gap:15px}
.identity-inner{min-height:700px;gap:0}.identity-art{height:255px;overflow:hidden;border-radius:14px;border:1px solid #748596;background:linear-gradient(#d6e0e8,#93a6b6);padding:9px;box-shadow:inset 0 1px #fff8}.identity-art img{width:100%;height:100%;object-fit:cover;border-radius:10px}.identity-inner h1{font:clamp(28px,2.45vw,39px)/1.05 lij-display,Tahoma,sans-serif;letter-spacing:-.03em;color:var(--panel-copy);margin:20px 0 10px}.identity-description{font:700 15px/1.4 Tahoma,Verdana,sans-serif;color:var(--panel-soft);margin:0 0 20px}.identity-links{margin-top:auto}.identity-links a,.social-actions a{background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--panel-copy);border-color:#71829388}.identity-links a:hover,.social-actions a:hover{filter:brightness(1.1)}
.theme-control{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;color:var(--panel-soft);font:700 10px good-timing,Tahoma,sans-serif;letter-spacing:.05em}.theme-control button{border:1px solid #8593a3;border-radius:20px;background:linear-gradient(#dce8f2,#a7b8c8);width:69px;height:31px;padding:3px;cursor:pointer;text-align:left;box-shadow:inset 0 2px 5px #52657550}.theme-control button span{display:block;width:24px;height:23px;border-radius:50%;background:linear-gradient(#f7fbff,#bfcbd5);box-shadow:0 2px 5px #0005;transition:transform .22s}.theme-control button[aria-checked=true]{background:linear-gradient(#6155a7,#342d66)}.theme-control button[aria-checked=true] span{transform:translateX(37px);background:linear-gradient(#d1c7ff,#9880d9)}
.stage-inner{min-height:700px;padding:13px 15px}.stage-topline{font-family:good-timing,Tahoma,sans-serif;color:var(--panel-soft);padding-bottom:4px}.device-bay{min-height:490px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9px}.touch-device{position:relative;flex:none;background:linear-gradient(140deg,#f5f7fb,#b9c2cf 40%,#8793a1 75%,#d5dee7);border:1px solid #6e7a88;border-radius:37px;box-shadow:inset 0 2px 1px #fff,0 13px 25px #1723317a,0 0 0 2px #e4ebf2;transition:width .5s,height .5s,border-radius .5s}.site-shell[data-theme=dark] .touch-device{background:linear-gradient(140deg,#c1c7cf,#77828e 48%,#535e6b 80%,#9ca5af)}.touch-device.is-portrait{width:278px;height:475px}.touch-device.is-landscape{width:min(100%,680px);height:382px}.touch-device.turning.is-landscape{animation:turn-landscape .6s ease-out}.touch-device.turning.is-portrait{animation:turn-portrait .6s ease-out}@keyframes turn-landscape{from{transform:rotate(-90deg) scale(.62)}to{transform:rotate(0) scale(1)}}@keyframes turn-portrait{from{transform:rotate(90deg) scale(.62)}to{transform:rotate(0) scale(1)}}.touch-screen{position:absolute;inset:27px 15px 57px;border-radius:6px;overflow:hidden;background:#05080c;box-shadow:inset 0 0 0 2px #27313c,0 0 0 3px #e5ebf1}.touch-device.is-landscape .touch-screen{inset:14px 57px 14px 26px}.touch-screen video{display:block;width:100%;height:100%;object-fit:contain}.screen-gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(140deg,#fff2,transparent 34%)}.device-camera{position:absolute;top:11px;left:50%;width:5px;height:5px;border-radius:50%;background:#40505f}.touch-device.is-landscape .device-camera{left:11px;top:50%}.device-home{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:27px;height:27px;border:1px solid #8392a2;border-radius:50%;box-shadow:inset 0 1px #fff}.device-home span{display:block;border:1px solid #79889a;border-radius:3px;width:8px;height:8px;margin:9px}.touch-device.is-landscape .device-home{left:auto;right:13px;top:50%;bottom:auto;transform:translateY(-50%)}
.playback-panel{border:1px solid #72869a;border-radius:13px;background:linear-gradient(#dce6ee,#aabaca);padding:8px 12px 9px;box-shadow:inset 0 1px #fff8;color:#253747}.site-shell[data-theme=dark] .playback-panel{background:linear-gradient(#919da9,#626d7b);color:#f0f6fc}.playback-main{display:flex;justify-content:center;align-items:center;gap:13px}.playback-main button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:12px;font-weight:700;min-width:33px;min-height:30px}.playback-main button:nth-child(2){width:42px;height:38px;border-radius:50%;background:linear-gradient(var(--button-top),var(--button-bottom));border:1px solid #8391a1;font-size:18px;box-shadow:inset 0 1px #fff9}.timeline{display:flex;align-items:center;gap:8px;font:11px good-timing,Tahoma,sans-serif}.timeline span{min-width:30px}.timeline span:last-child{text-align:right}.timeline input,.volume-row input{accent-color:#618aad;cursor:pointer;min-width:0}.timeline input{flex:1}.volume-row{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:6px;font:10px good-timing,Tahoma,sans-serif}.volume-row input{width:90px}.volume-row span{min-width:28px}.stage-footer{padding:14px 4px 1px}.stage-footer .eyebrow{color:var(--panel-soft)}.stage-footer h2,.panel-content h2{font-family:lij-display,Tahoma,sans-serif;font-weight:400;letter-spacing:-.03em;color:var(--panel-copy)}.stage-footer h2{font-size:30px}.featured-caption{color:var(--panel-soft);font-family:good-timing,Tahoma,sans-serif}.credit-links{display:flex;gap:6px;flex-wrap:wrap;padding:10px 3px 3px}.credit-links a{font:10px good-timing,Tahoma,sans-serif;color:var(--panel-copy);padding:7px 9px;background:linear-gradient(var(--button-top),var(--button-bottom));border:1px solid #8091a0;border-radius:10px}.credit-links a:hover{filter:brightness(1.1)}
.index-inner{max-height:755px}.work-item{background:linear-gradient(#f0f4f7,#c4d0dc);color:#243445}.work-item.active{background:linear-gradient(#7ea7cd,#587d9e)}.site-shell[data-theme=dark] .work-item:not(.active){background:linear-gradient(#8f9aa7,#687482);color:#f2f7fd}.work-label strong{font-family:good-timing,Tahoma,sans-serif}.index-heading{font-family:good-timing,Tahoma,sans-serif;color:var(--panel-soft)}
.lower-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.panel-content{min-height:0;padding:19px 23px 21px}.panel-content h2{font-size:29px;margin-bottom:17px}.panel-content .eyebrow{color:var(--panel-soft)}.commission-button{max-width:340px}.email-link{color:var(--panel-soft)}.text-button{color:var(--panel-soft)}.social-actions a{min-width:135px}footer span:last-child{color:#b8cad8}
.commission-button{background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--panel-copy);border-color:#738da3;box-shadow:inset 0 1px #fffa,0 3px 0 #5e7386}.commission-button:hover{background:linear-gradient(#fff,#c8d9e7)}
@media(max-width:1120px){.desktop-grid{grid-template-columns:minmax(200px,250px) minmax(420px,1fr)}.index-window{grid-column:1/-1}.index-inner{max-height:none}.work-list{grid-template-columns:repeat(4,1fr)}.identity-inner,.stage-inner{min-height:690px}}
@media(max-width:720px){body{background-image:url('./shared/mobile-background.webp');background-attachment:fixed}.site-shell{padding:10px}.desktop-grid,.lower-grid{display:flex;flex-direction:column;gap:10px}.stage-window{order:1;width:100%}.identity-window{order:2;width:100%}.index-window{order:3;width:100%}.stage-inner{min-height:0}.device-bay{min-height:485px}.touch-device.is-portrait{width:260px;height:450px}.touch-device.is-landscape{width:min(100%,350px);height:213px;border-radius:25px}.touch-device.is-landscape .touch-screen{inset:9px 36px 9px 18px}.touch-device.is-landscape .device-home{right:7px;width:22px;height:22px}.touch-device.is-landscape .device-home span{margin:6px}.touch-device.is-landscape .device-camera{left:7px}.identity-inner{min-height:0}.identity-art{height:185px}.identity-inner h1{margin:16px 0 7px}.identity-links{margin-top:0}.theme-control{margin-top:17px}.index-inner{max-height:none}.work-list{grid-template-columns:repeat(2,1fr)}.lower-grid{align-items:stretch}.panel-content{padding:18px 20px}.panel-content h2{font-size:26px}.credit-links a{font-size:9px}}
@media(max-width:420px){.device-bay{min-height:472px;padding:0}.touch-device.is-portrait{width:248px;height:438px}.touch-device.is-landscape{width:320px;height:202px}.work-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.device-bay:has(.touch-device.is-landscape){min-height:250px}}
@media(prefers-reduced-motion:reduce){.touch-device,.theme-control button span{transition:none}.touch-device.turning{animation:none}}
/* shared lij.fyi panel palette and interaction details */
.site-shell{--inset-top:rgba(222,232,240,.96);--inset-bottom:rgba(157,176,192,.96)}
.site-shell[data-theme=dark]{--inset-top:rgba(132,145,161,.97);--inset-bottom:rgba(92,103,118,.98)}
.stage-footer h2,.panel-content h2{font-family:good-timing,Tahoma,sans-serif;font-weight:700;letter-spacing:-.055em}
.identity-art{height:265px;background:linear-gradient(var(--inset-top),var(--inset-bottom));padding:8px}
.identity-art img{object-position:center 23%}
.identity-description{font-weight:400;line-height:1.55;margin-top:20px}
.playback-panel,.work-item:not(.active){background:linear-gradient(var(--inset-top),var(--inset-bottom));color:var(--panel-copy)}
.site-shell[data-theme=dark] .playback-panel,.site-shell[data-theme=dark] .work-item:not(.active){background:linear-gradient(var(--inset-top),var(--inset-bottom));color:var(--panel-copy)}
body{cursor:url('./shared/main-cursor.png') 4 4,auto}
a,button,input[type=range]{cursor:url('./shared/hover-cursor.png') 4 4,pointer}
a:active,button:active,input[type=range]:active{cursor:url('./shared/click-cursor.png') 4 4,pointer}
#cursor-trail{position:fixed;inset:0;z-index:10;pointer-events:none}
@media(max-width:720px){.identity-art{height:230px}.identity-description{margin-top:16px}}
@media(hover:none),(prefers-reduced-motion:reduce){#cursor-trail{display:none}}
/* match the screen opening to the 9:16 and 16:9 source renders */
.touch-device.is-portrait{width:248px;height:470px}
.touch-device.is-landscape{width:min(100%,680px);height:auto;aspect-ratio:680/364}
.touch-screen video{object-fit:cover}
.playback-main{position:relative}
#fullscreen{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:23px;line-height:1}
@media(max-width:720px){.touch-device.is-portrait{width:238px;height:452px}.touch-device.is-landscape{width:min(100%,350px);height:auto;aspect-ratio:350/185}}
@media(max-width:420px){.touch-device.is-portrait{width:230px;height:438px}.touch-device.is-landscape{width:min(100%,320px);height:auto;aspect-ratio:320/168}}
/* a deeper night palette with clear controls and labels */
.site-shell[data-theme=dark]{--shell-edge:#697383;--shell-face:#343f4d;--shell-face-dark:#242e3a;--titlebar-top:#596676;--titlebar-bottom:#303c4b;--panel-copy:#f0f5fb;--panel-soft:#d0dce9;--button-top:#64758a;--button-bottom:#3b4b5d;--inset-top:#435064;--inset-bottom:#2b3746}
.site-shell[data-theme=dark] .window{border-color:#6b7b8e;box-shadow:0 20px 45px #0008,inset 0 1px #ffffff35,inset 0 -2px #10182099}
.site-shell[data-theme=dark] .titlebar{border-bottom-color:#1d2836;color:#f0f5fb}
.site-shell[data-theme=dark] .touch-device{background:linear-gradient(140deg,#99a5b2,#606d7e 42%,#384657 80%,#8b98a6);border-color:#283444}
.site-shell[data-theme=dark] .identity-art{border-color:#273443}
.site-shell[data-theme=dark] .work-item{border-color:#657588}
.site-shell[data-theme=dark] .work-item.active{background:linear-gradient(#547a9d,#314e6b);border-color:#8db5d4;color:#fff}
.site-shell[data-theme=dark] .playback-panel{border-color:#63758a;box-shadow:inset 0 1px #ffffff38}
.site-shell[data-theme=dark] .credit-links a,.site-shell[data-theme=dark] .identity-links a,.site-shell[data-theme=dark] .social-actions a,.site-shell[data-theme=dark] .commission-button{border-color:#8799ad;color:#f0f5fb}
.site-shell[data-theme=dark] .theme-control button[aria-checked=true]{background:linear-gradient(#3b5280,#1e2b4c)}
.site-shell[data-theme=dark] .timeline input,.site-shell[data-theme=dark] .volume-row input{accent-color:#acd2f5}
/* lij.fyi's light playlist surfaces and stronger copy contrast */
.site-shell[data-theme=light] .work-item:not(.active){background:rgba(245,248,251,.6);border-color:rgba(106,124,139,.52);color:#203140}
.site-shell[data-theme=light] .work-item:not(.active):hover{background:linear-gradient(#7ea7cd,#587d9e);color:#f3fbff}
.site-shell[data-theme=light] .work-item.active{background:linear-gradient(#7ea7cd,#587d9e);color:#f3fbff}
.site-shell[data-theme=light] .work-item small,.site-shell[data-theme=light] .work-number{opacity:.9}
.site-shell[data-theme=light] .identity-description{color:var(--panel-copy);font-weight:700;line-height:1.4}
.site-shell[data-theme=light] .text-button,.site-shell[data-theme=light] .email-link{color:var(--panel-copy);font-weight:700}
/* the same inset panels and button colors used on lij.fyi */
.site-shell[data-theme=light] .index-inner{margin:10px;padding:11px;background:linear-gradient(180deg,rgba(222,232,240,.96),rgba(157,176,192,.96));border:1px solid rgba(103,121,137,.74);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(83,100,115,.25)}
.site-shell[data-theme=light] .work-list{gap:5px}
.site-shell[data-theme=light] .work-item{min-height:50px;padding:4px}
.site-shell[data-theme=light] .identity-art,.site-shell[data-theme=light] .playback-panel{border-color:rgba(103,121,137,.74)}
.site-shell[data-theme=light] .identity-links a,.site-shell[data-theme=light] .social-actions a,.site-shell[data-theme=light] .credit-links a,.site-shell[data-theme=light] .commission-button{background:linear-gradient(180deg,rgba(220,230,239,.95),rgba(166,184,201,.94));border-color:rgba(98,115,130,.72);color:var(--panel-copy);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 3px 8px rgba(0,0,0,.1)}
.site-shell[data-theme=light] .playback-main button:nth-child(2){background:linear-gradient(180deg,#e8edf2,#bcc5cf)}
.identity-description{font-family:Tahoma,Verdana,sans-serif;font-size:15px;font-weight:700;line-height:1.4;color:var(--panel-copy)}