@font-face{font-family:Barrio;src:url('../fonts/Barrio.ttf') format('truetype');font-display:swap}
@font-face{font-family:Griun;src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2607161334@x-7/x/GriunXHangeulDDURAE-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap}
@font-face{font-family:Cutive;src:url('../fonts/CutiveMono-Regular.ttf') format('truetype');font-display:swap}
:root{--font-title:Barrio,Impact,sans-serif;--font-body:Griun,Arial,sans-serif;--font-code:Cutive,'Courier New',monospace;color-scheme:dark;font-family:var(--font-body);background:#000;color:#999;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#000}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible,.banner-window:focus-visible{outline:2px solid #ddd;outline-offset:5px}
.room{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;background:#090909;transition:opacity .18s ease-out}
.room::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(#000b,#0009),url('../images/floor.jpg') center/550px repeat;filter:grayscale(1);opacity:.38}
.room::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#ffffff08,transparent 42%),radial-gradient(ellipse at center,transparent 10%,#000b 100%),repeating-linear-gradient(0deg,transparent 0 3px,#0002 4px 5px)}
.site-header{padding:clamp(45px,8vh,90px) 24px 20px;text-align:center}
.neon-sign{display:inline-flex;white-space:nowrap;align-items:baseline;margin:0;font-family:var(--font-title);font-size:clamp(34px,7.5vw,108px);font-weight:400;line-height:1.2;letter-spacing:.025em;animation:fluorescent 11s linear infinite;filter:drop-shadow(0 0 2px #fff8) drop-shadow(0 0 13px #ffffff40)}
.solid{color:#f5f5f2;text-shadow:0 0 5px #fff8,0 0 24px #ffffff35}
.outline{color:#030303;-webkit-text-stroke:1.3px #eee;text-shadow:none;margin-left:.035em}
main{flex:1;min-height:280px}
.site-footer{width:min(620px,calc(100% - 240px));margin:0 auto;padding:24px 0 32px;text-align:center}
.established{font-size:11px;letter-spacing:.14em;margin:0 0 20px;color:#91918a}
.banner-window{max-width:100%;overflow:hidden;padding:5px 0;margin:0 auto 23px;width:fit-content}
.banner-track,.banner-group{display:flex;align-items:center;gap:12px;width:max-content}.banner-track{gap:0}.banner-group{flex-shrink:0}.web-button{display:block;width:88px;height:31px;flex-shrink:0;opacity:.7;transition:opacity .2s}.web-button:hover,.web-button:focus-visible{opacity:1}.web-button img{display:block;image-rendering:pixelated}
.banner-window.is-overflowing{width:100%;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.is-overflowing .banner-group{padding-right:12px}.is-overflowing .banner-track{animation:marquee var(--duration,20s) linear infinite}.banner-window:hover .banner-track,.banner-window:focus-within .banner-track{animation-play-state:paused}
.footer-copy{display:flex;justify-content:center;gap:8px 24px;flex-wrap:wrap;border-top:1px solid #ffffff0e;padding-top:17px;font-size:10px;letter-spacing:.065em;color:#62625d}
.light-switch{position:fixed;z-index:10;bottom:26px;right:28px;width:66px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid #55534c;border-radius:4px;background:linear-gradient(105deg,#393932,#22231f 70%,#30312b);box-shadow:2px 4px 12px #000,inset 1px 1px 0 #ffffff16;color:#aaa99c;cursor:pointer}.screw{width:5px;height:5px;border:1px solid #77766b;border-radius:50%;background:linear-gradient(120deg,transparent 40%,#111 41% 60%,transparent 61%)}.switch-label,.switch-state{font-size:8px;letter-spacing:.13em}.rocker{width:29px;height:43px;display:flex;flex-direction:column;justify-content:space-around;border:1px solid #141510;border-radius:2px;background:linear-gradient(#77786b,#4d4e44 46%,#31322b);box-shadow:0 3px 2px #000b,inset 0 1px #99998b;color:#cccabd;font:10px var(--font-body)}.rocker span:first-child{text-shadow:0 0 5px #fff}.switch-state{color:#c9c9b6}.light-switch:hover{border-color:#828074}
body.lights-off .room{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .12s,visibility 0s .12s}body.lights-off .rocker{background:linear-gradient(#30312a,#56574d 65%,#77786b);box-shadow:0 -2px 2px #000b,inset 0 -1px #99998b}body.lights-off .switch-state{color:#838477}body.lights-off .room *{animation-play-state:paused!important}
@keyframes fluorescent{0%,3%,3.8%,4.5%,5.2%,54%,55%,100%{opacity:1}3.4%,4.9%{opacity:.65}54.5%{opacity:.82}20%,42%,75%{opacity:.94}}
@keyframes marquee{to{transform:translateX(calc(-1 * var(--loop-width)))}}
@media(max-width:600px){.site-header{padding-top:52px}.neon-sign{font-size:clamp(28px,8.4vw,50px)}.outline{-webkit-text-stroke:1px #eee}.site-footer{width:calc(100% - 112px);margin-left:20px;padding-bottom:25px}.established{font-size:9px;letter-spacing:.04em}.footer-copy{font-size:9px;gap:6px}.light-switch{right:16px;bottom:22px;width:58px}main{min-height:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.banner-window.is-overflowing{overflow-x:auto;mask-image:none}.banner-group[aria-hidden]{display:none}}
/* Faded tiles beneath a mottled, aged surface. */
.room::before{opacity:.14}
.room::after{background-image:radial-gradient(ellipse at 50% 0%,#ffffff08,transparent 42%),radial-gradient(ellipse at center,transparent 10%,#000b 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.035' filter='url(%23n)' d='M0 0h220v220H0z'/%3E%3C/svg%3E")}

/* Shared typography for current and future page content. */
h1,h2,h3,h4,h5,h6,.font-title{font-family:var(--font-title);font-weight:400}
body,input,textarea,select,button,.font-body{font-family:var(--font-body)}
pre,code,kbd,samp,.font-code{font-family:var(--font-code)}
pre{line-height:1.6;overflow-x:auto;tab-size:2}
pre code{font-size:inherit}

/* A small room, seen from behind Kukui. */
.room::before{background:radial-gradient(ellipse at 50% 45%,#24221f,transparent 65%);opacity:.3}
.scene-container{display:grid;place-items:center;padding:10px 16px 0;min-height:360px;overflow:hidden}
.watching-scene{position:relative;width:min(760px,100%);aspect-ratio:760/470;isolation:isolate}
.scene-floor{position:absolute;z-index:-2;left:-12%;right:-12%;top:40%;height:65%;background:linear-gradient(#0009,#0004),url('../images/floor.jpg') center/65% auto;transform:perspective(420px) rotateX(57deg);transform-origin:center 30%;opacity:.46;mask-image:radial-gradient(ellipse at center,#000 18%,transparent 69%)}
.tv-spill{position:absolute;z-index:-1;left:22%;top:47%;width:58%;height:45%;background:radial-gradient(ellipse,#c7d6dc21,transparent 68%);transform:rotate(-8deg)}
.television{position:absolute;left:29%;top:0;width:34%;filter:drop-shadow(0 15px 12px #000b)}
.tv-cabinet{display:block;width:100%;height:auto;filter:brightness(.63) saturate(.55)}
.tv-screen{position:absolute;left:18.5%;top:39%;width:53%;height:36%;border-radius:25% 28% 22% 20% / 24% 27% 23% 20%;overflow:hidden;transform:rotate(.6deg);background:#778080;box-shadow:0 0 14px #d7e6ee28,inset 0 0 10px #000}
#tv-static{display:block;width:100%;height:100%;opacity:.78;image-rendering:pixelated}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0005 0 1px,transparent 1px 3px),radial-gradient(ellipse,transparent 35%,#0009);pointer-events:none}
.scanlines::after{content:'';position:absolute;inset:-100% 0 0;background:linear-gradient(transparent 45%,#eef4f41a 49%,#0008 51%,transparent 55%);animation:tracking 7s linear infinite}
.kukui-watching{position:absolute;left:40%;bottom:0;width:35%;height:auto;filter:brightness(.57) saturate(.65) drop-shadow(-3px -2px 3px #dceaff18)}
.kukui-shadow{position:absolute;left:40%;bottom:0;width:35%;height:10%;background:#000a;filter:blur(9px);border-radius:50%}
@keyframes tracking{to{transform:translateY(100%)}}
@media(max-width:600px){.scene-container{padding:0 8px;min-height:320px}.watching-scene{width:118%;max-width:500px;flex-shrink:0}.television{top:-4%}.kukui-watching{width:38%;left:39%}}

/* Lost channel / 404. Root-relative assets also work on nested missing URLs. */
.error-page .neon-sign{text-decoration:none;font-size:clamp(28px,5vw,68px)}
.error-page .site-header{padding-top:36px;padding-bottom:8px}
.error-main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
.error-page .scene-container{width:100%;min-height:0;flex:none;padding-top:0}
.error-page .watching-scene{width:min(590px,100%)}
.error-page .tv-screen{background:#161c1c}
.error-page #tv-static{opacity:.25}
.lost-signal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#e4e9dc;text-shadow:0 0 7px #d9f1d37a}
.lost-signal strong{font-family:var(--font-title);font-size:clamp(27px,4.5vw,48px);font-weight:400;line-height:1}
.lost-signal>span{font-family:var(--font-code);font-size:clamp(7px,1vw,10px);letter-spacing:.08em;margin-top:5px}
.error-message{text-align:center;padding:4px 24px 24px}
.error-message h1{font-size:clamp(21px,3vw,30px);letter-spacing:.12em;color:#d1d0c8;margin:0 0 12px;font-weight:400}
.error-message p{font-size:15px;line-height:1.7;color:#a3a39a;margin:0 0 20px}
.home-link{display:inline-flex;align-items:center;justify-content:center;grid-column:1 / -1;justify-self:center;align-self:center;min-height:44px;margin:12px auto 20px;padding:8px 16px;border:0;background:none;font-family:var(--font-title);font-size:28px;line-height:1.2;letter-spacing:.12em;text-decoration:none;color:#ededdf;text-shadow:0 0 5px #ffffff80,0 0 18px #ffffff50,0 0 32px #ffffff20;transition:color .2s,text-shadow .2s}
.home-link:hover,.home-link:focus-visible{color:#fff;text-shadow:0 0 7px #fff,0 0 24px #ffffff90,0 0 40px #ffffff50}
.error-page .site-footer{padding-top:14px;padding-bottom:24px}
.error-page .established{margin-bottom:12px}
.error-page .banner-window{margin-bottom:14px}
@media(max-width:600px){.error-page .site-header{padding-top:32px}.error-page .scene-container{padding:15px 8px 0}.error-page .watching-scene{width:110%;max-width:440px}.error-message{padding-top:18px}.error-message p{font-size:14px}.error-message h1{letter-spacing:.07em}.home-link{font-size:24px}.error-page .site-footer{margin-top:10px}}

/* Quietly floating navigation around the television. */
.floating-menu{position:absolute;inset:0;z-index:3;pointer-events:none}
.floating-link{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:8px 5px;font-family:var(--font-title);font-size:clamp(15px,2.6vw,23px);letter-spacing:.06em;text-decoration:none;color:#deded7;text-shadow:0 0 5px #ffffff70,0 0 18px #ffffff35;pointer-events:auto;animation:menu-float 6s ease-in-out infinite alternate}
.floating-link small{font-family:var(--font-body);font-size:8px;letter-spacing:.1em;margin-top:6px;color:#9b9b93;text-shadow:none}
.floating-link[aria-disabled]{cursor:default;color:#b3b4ac;text-shadow:0 0 8px #ffffff40}
a.floating-link:hover,a.floating-link:focus-visible{color:#fff;text-shadow:0 0 7px #fff,0 0 24px #ffffff80;animation-play-state:paused}
.menu-profile{left:10%;top:16%}.menu-blog{right:9%;top:14%;animation-delay:-2s}.menu-nelg{left:3%;top:45%;animation-delay:-4s}.menu-links{right:6%;top:42%;animation-delay:-1s}.menu-guestbook{left:9%;top:73%;animation-delay:-3s}
@keyframes menu-float{from{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(6px) rotate(2deg)}}
.profile-page .neon-sign{text-decoration:none;font-size:clamp(28px,5vw,68px)}
.profile-page .site-header{padding:36px 24px 20px}
.profile-main{width:min(1060px,100%);margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:24px 32px 48px;gap:30px}
.profile-main .scene-container{min-height:0;width:100%;padding:0;overflow:visible}
.profile-main .watching-scene{width:100%}
.profile-card{position:relative;padding:25px 0;min-width:0}
.profile-kicker{font-size:10px;letter-spacing:.15em;color:#93988b;margin:0 0 16px}
.profile-card h1{font-size:clamp(28px,3vw,40px);line-height:1.2;color:#e4e4dc;margin:0 0 15px;text-shadow:0 0 16px #ffffff20}
.profile-intro,.profile-about p{font-size:16px;line-height:1.8;color:#aeafa4}
.profile-facts{margin:28px 0;padding:18px 0;border-block:1px solid #ffffff16;font-size:14px}
.profile-facts>div{display:grid;grid-template-columns:115px 1fr;gap:12px;padding:7px 0}.profile-facts dt{color:#7e8679;font-size:11px;letter-spacing:.05em}.profile-facts dd{margin:0;color:#c1c3b5}
.profile-about h2{font-size:21px;color:#d2d4c7;letter-spacing:.06em;margin:0}.profile-about p{margin:10px 0 26px}
@media(max-width:600px){.floating-link{font-size:14px;letter-spacing:.02em}.floating-link small{font-size:7px;letter-spacing:0}.menu-profile{left:8%;top:7%}.menu-blog{right:7%;top:3%}.menu-nelg{left:3%;top:38%}.menu-links{right:5%;top:35%}.menu-guestbook{left:8%;top:72%;font-size:12px}.profile-main{grid-template-columns:1fr;padding:5px 24px 24px;gap:0}.profile-main .scene-container{max-width:360px;margin:0 auto}.profile-main .watching-scene{width:100%}.profile-card{padding-top:25px}.profile-kicker{font-size:9px}.profile-facts>div{grid-template-columns:100px 1fr}}
.profile-main .scene-container{overflow:hidden}
@media(max-width:600px){.floating-menu{left:7%;right:7%}.menu-profile{left:2%}.menu-blog{right:1%}.menu-nelg{left:0}.menu-links{right:0}.menu-guestbook{left:2%}}



/* Compact, copyable 88 x 31 site button. */
.button-share{display:flex;align-items:center;justify-content:center;gap:10px;width:min(340px,100%);margin:0 auto 17px;text-align:left}
.share-preview{display:block;flex:0 0 88px;height:31px}.share-preview img{display:block;image-rendering:pixelated}
.share-tools{min-width:0;flex:1}.share-tools label{display:block;font-size:9px;letter-spacing:.06em;color:#a0a094;margin-bottom:4px}
.share-controls{display:flex;align-items:stretch;gap:6px}
#button-code{min-width:0;width:100%;height:32px;resize:none;border:1px solid #ffffff1c;border-radius:0;background:#0005;color:#a4a69b;padding:3px 5px;font-family:var(--font-code);font-size:9px;line-height:12px;white-space:pre;overflow:auto}
#copy-button-code{flex:none;border:0;background:none;color:#c2c4b6;font-size:10px;padding:4px;cursor:pointer}#copy-button-code:hover{color:#fff;text-shadow:0 0 6px #fff8}
#copy-status{display:block;font-size:9px;color:#a4ae96}#copy-status:not(:empty){margin-top:4px}
@media(max-width:400px){.button-share{gap:7px}.share-controls{gap:2px}#copy-button-code{font-size:9px}}

.web-button-text{display:flex;align-items:center;justify-content:center;border:1px solid #777c66;background:#242d2b;color:#ece7cf;font-family:var(--font-code);font-size:12px;letter-spacing:.08em;text-decoration:none}

/* Chunky, hand-drawn wall switch shared by every page. */
.light-switch{width:76px;padding:9px 10px;gap:6px;bottom:24px;right:25px;border:3px solid #10110e;border-radius:7px 10px 6px 9px;background:#77796a;box-shadow:4px 5px 0 #090a08,inset 2px 2px 0 #a1a38b,inset -3px -3px 0 #4c5043;transform:rotate(2deg);color:#171b14}
.light-switch:hover{border-color:#10110e;background:#888b77}
.light-switch .screw{position:relative;width:9px;height:9px;border:2px solid #20251b;border-radius:45% 55% 48% 42%;background:#acaf95;box-shadow:1px 1px 0 #414737;transform:rotate(-25deg)}
.light-switch .screw::after{content:'';position:absolute;left:0;right:0;top:2px;height:1px;background:#20251b}
.light-switch .screw:last-child{transform:rotate(35deg)}
.light-switch .switch-label{font-family:var(--font-title);font-size:10px;letter-spacing:.06em;line-height:1}
.light-switch .rocker{width:38px;height:49px;border:3px solid #171b14;border-radius:4px 5px 3px 5px;background:#c5c7a8;box-shadow:3px 4px 0 #323a29,inset 0 4px 0 #e4e6c7,inset 0 -7px 0 #939779;color:#242a1e;font-family:var(--font-title);font-size:13px;transform:rotate(-2deg)}
.light-switch .rocker span:first-child{text-shadow:none}
.light-switch .switch-state{font-family:var(--font-title);font-size:9px;letter-spacing:.08em;color:#1e2718}
body.lights-off .light-switch{background:#646958;box-shadow:4px 5px 0 #090a08,inset 2px 2px 0 #92967c,inset -3px -3px 0 #414837}
body.lights-off .light-switch .rocker{background:#a3aa8d;box-shadow:1px 1px 0 #323a29,inset 0 7px 0 #737c60,inset 0 -3px 0 #c6ccaf;transform:translate(2px,2px) rotate(-2deg)}
body.lights-off .light-switch .switch-state{color:#1e2718}
@media(max-width:600px){.light-switch{right:16px;bottom:22px;width:65px;padding:7px 8px;gap:5px}.light-switch .rocker{width:33px;height:43px}.light-switch .switch-label{font-size:9px}}