:root{color-scheme:dark;--paper:#fff1ce;--gold:#ffc767;--ink:#191817;--shell:#191817}*{box-sizing:border-box}body{margin:0;background:var(--shell);color:var(--paper);font-family:Arial,Helvetica,sans-serif;transition:background-color 1.2s,color 1.2s}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #ffffff1c;transition:background-color 1.2s,border-color 1.2s}.wordmark{font-size:22px;letter-spacing:-1px;font-weight:900;text-align:left;background:none;border:0;padding:0}.wordmark span{display:block;font-size:10px;letter-spacing:3px;margin-top:6px;color:var(--gold)}nav{display:flex;gap:10px}nav button{background:none;border:1px solid transparent;padding:11px 17px;font-size:14px;border-radius:25px}nav button:hover{border-color:#ffc76766;background:#ffc76710}nav button:last-child{border-color:#ffc76780;color:var(--gold)}.viewport{width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#886344 #191817}.scene{position:relative;width:100%;max-width:177.68vh;margin:auto;line-height:0;overflow:hidden}.scene>img{width:100%;height:auto;display:block;transition:filter 1.6s ease,transform 1.6s ease}.scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle at 18% 29%,#ff2d181e 0 12%,transparent 25%),radial-gradient(circle at 55% 18%,#ffc55a14 0 6%,transparent 16%),linear-gradient(180deg,#101638b8,#081928a8 55%,#091f2cb8);mix-blend-mode:multiply;transition:opacity 1.6s ease}.hotspot{z-index:2;position:absolute;background:transparent;border:2px solid transparent;border-radius:14px;transition:background .22s,border-color .22s,box-shadow .22s}.logo{left:7%;top:17%;width:33%;height:29%;transform:rotate(2deg)}.services{left:74.3%;top:45.2%;width:12%;height:11%;transform:rotate(-4deg)}.play{left:15%;top:68.5%;width:23%;height:19%}.hotspot>span{position:absolute;left:50%;bottom:-20px;transform:translate(-50%,10px);white-space:nowrap;padding:13px 18px;border-radius:25px;background:var(--paper);color:var(--ink);line-height:1.2;font-size:14px;font-weight:bold;opacity:0;transition:.2s;box-shadow:0 5px 20px #0005}.hotspot b{margin-left:10px}.hotspot:hover,.hotspot:focus-visible,.show-hints .hotspot{border-color:#ffe6a6;box-shadow:0 0 24px #ffcc5260;background:#ffde6e0f}.hotspot:hover>span,.hotspot:focus-visible>span,.show-hints .hotspot>span{opacity:1;transform:translate(-50%,0)}.studio-controls{padding:14px 4%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#151311;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;transition:background-color 1.2s,border-color 1.2s}.now-playing{min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"equal label" "equal track";column-gap:10px;align-items:center}.now-label{grid-area:label;font-size:11px;letter-spacing:1.7px;color:#aa9d88}.now-playing>a{grid-area:track;color:var(--paper);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing>a:hover{text-decoration:underline;color:var(--gold)}.equalizer{grid-area:equal;display:flex;align-items:flex-end;gap:2px;height:18px}.equalizer i{display:block;width:3px;height:7px;border-radius:2px;background:var(--gold);transform-origin:bottom}.music-playing .equalizer i{animation:equalize .8s ease-in-out infinite alternate}.music-playing .equalizer i:nth-child(2){animation-delay:-.3s;height:14px}.music-playing .equalizer i:nth-child(3){animation-delay:-.55s;height:10px}@keyframes equalize{to{height:17px}}.control-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}.mode-switch{display:flex;padding:3px;border:1px solid #ffffff24;border-radius:999px}.mode-switch button,#music-toggle{border:0;background:transparent;padding:9px 12px;border-radius:999px;font-size:14px}.mode-switch button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}#music-toggle{border:1px solid #ffc76770;color:var(--gold);min-width:118px}#music-toggle:hover{background:#ffc76712}.spotify-panel{position:fixed;right:18px;bottom:18px;z-index:20;width:min(360px,calc(100vw - 36px));padding:10px;background:#101010;border:1px solid #ffffff30;border-radius:16px;box-shadow:0 18px 60px #000a}.spotify-panel[hidden]{display:none}.spotify-panel>button{position:absolute;right:12px;top:-34px;width:30px;height:30px;border:1px solid #ffffff38;border-radius:50%;background:#191817;color:#fff;font-size:20px;line-height:1}.spotify-panel iframe{display:block;border-radius:12px}footer{padding:20px 4%;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:#c7baa4;transition:background-color 1.2s,color 1.2s}footer p{margin:0}.spark{font-size:22px;color:var(--gold);margin-right:10px;vertical-align:middle}footer button{border:0;background:none;padding:8px 0;font-size:14px}footer button span{margin-left:14px;color:var(--gold)}.mobile-hint{display:none}dialog{background:var(--paper);color:var(--ink);width:min(580px,calc(100% - 28px));max-height:90dvh;border:2px solid var(--ink);border-radius:6px;padding:46px;box-shadow:12px 12px 0 #0005;overflow:auto}dialog::backdrop{background:#0e1014c9;backdrop-filter:blur(6px)}.close{position:absolute;right:14px;top:12px;background:transparent;border:0;color:var(--ink);font-size:30px;width:40px;height:40px;border-radius:50%}.close:hover{background:#0001}.eyebrow{font-size:12px!important;letter-spacing:2px;font-weight:bold;color:#78522f;margin:0 0 20px!important}h1{font-size:clamp(32px,5vw,48px);line-height:1.02;letter-spacing:-2px;margin:0 0 24px;font-weight:900}dialog p{font-size:16px;line-height:1.65;margin:16px 0}.signature{font-weight:900;font-style:italic;font-size:28px;transform:rotate(-3deg);margin:30px 0;color:#b64128}.primary{background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:14px 20px;border-radius:4px;font-weight:bold;font-size:16px}.primary:hover{background:#a53523;border-color:#a53523}.service-list{margin:24px 0}details{border-top:1px solid #34200d40;padding:15px 0}summary{font-size:19px;font-weight:bold;cursor:pointer}summary span{color:#9b5e35;font-size:12px;margin-right:15px}details p{padding-left:32px;margin-bottom:0}.note{font-size:14px!important;border-left:3px solid #be5b32;padding-left:16px;color:#65492c}.game-meta{display:flex;justify-content:space-between;font-size:14px;font-weight:bold;margin:24px 0 12px}.game{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card{aspect-ratio:1;background:#28605a;border:2px solid var(--ink);color:var(--paper);border-radius:7px;font-size:30px;box-shadow:0 3px 0 var(--ink);transition:transform .15s}.card:hover{transform:translateY(-2px)}.card.revealed{background:#efb254;color:#191817}.card.matched{background:#dbcba7;color:#514b3b;box-shadow:none;transform:translateY(3px)}#game-status{font-size:14px;min-height:24px}body.modal-open{overflow:hidden}body[data-mode="night"]{--shell:#070b16;--gold:#bba4ff}body[data-mode="night"] header{background:#090d19;border-color:#9f86ff26}body[data-mode="night"] .scene>img{filter:brightness(.46) saturate(.68) hue-rotate(142deg) contrast(1.18)}body[data-mode="night"] .scene::after{opacity:1}body[data-mode="night"] .studio-controls,body[data-mode="night"] footer{background:#080c17;color:#aeb5cf;border-color:#9f86ff20}body[data-mode="night"] .hotspot:hover,body[data-mode="night"] .hotspot:focus-visible,body[data-mode="night"].show-hints .hotspot{border-color:#cbbcff;box-shadow:0 0 30px #7961ff7a;background:#7861ff16}@media(min-width:1800px){main{max-width:2000px;margin:auto}}@media(max-width:700px){header{height:78px;padding:0 20px}.wordmark{font-size:18px}.wordmark span{font-size:9px}nav{gap:0}nav button{padding:10px;font-size:13px}nav button:first-child{display:none}.viewport{height:calc(100dvh - 258px);min-height:360px}.scene{height:100%;width:auto;aspect-ratio:1672/941;max-width:none;margin:0}.scene>img{height:100%;width:100%}.studio-controls{padding:11px 14px;align-items:flex-end}.now-label{font-size:10px}.now-playing>a{font-size:12px;max-width:46vw}.control-actions{gap:5px}.mode-switch button,#music-toggle{font-size:12px;padding:8px}#music-toggle{min-width:0}.mode-switch button{font-size:0}.mode-switch button::first-letter{font-size:14px}footer{padding:12px 20px;flex-wrap:wrap;gap:8px}footer p:first-child{display:none}.mobile-hint{display:block;font-size:12px}dialog{padding:42px 25px 28px}h1{letter-spacing:-1px}.hotspot>span{font-size:13px;padding:10px}.game{gap:8px}}@media(max-width:430px){.studio-controls{display:grid;grid-template-columns:1fr auto}.control-actions{grid-column:1/-1;justify-content:space-between}.now-playing>a{max-width:70vw}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}.music-playing .equalizer i{animation:none!important}}

#contact-form{margin-top:24px}#contact-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700;margin-bottom:18px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}#contact-form input,#contact-form select,#contact-form textarea{font:inherit;font-size:16px;font-weight:400;color:#191817;background:#fff9e9;border:1px solid #9b8763;border-radius:4px;padding:12px;width:100%;min-width:0;line-height:1.4;color-scheme:light}#contact-form textarea{resize:vertical;min-height:130px}#contact-form :is(input,select,textarea):focus-visible{outline:3px solid #a53523;outline-offset:2px}#contact-form .form-help{font-size:14px;line-height:1.5;color:#65492c}#contact-status:empty{display:none}#contact-status{font-size:14px;background:#eadab7;padding:12px;border-radius:4px}.contact-alternative{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:22px;border-top:1px solid #34200d40;padding-top:18px;font-size:14px;line-height:1.5}.contact-alternative a{color:#8c301f;font-weight:bold}.contact-alternative button{padding:0;background:none;border:0;text-decoration:underline;color:#65492c;font-size:14px;flex-basis:100%;text-align:left;margin-top:6px}@media(max-width:480px){.form-row{grid-template-columns:1fr;gap:0}}

.now-playing>a{white-space:normal;overflow:visible;text-overflow:clip}

@media(max-width:700px){.mode-switch button{font-size:12px}.mode-switch button::first-letter{font-size:inherit}.control-actions{flex-wrap:wrap}}

.scene>.day-scene{position:relative;z-index:0;opacity:1;filter:none!important}
.scene>.night-scene{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:none!important;transition:opacity 1.6s ease}
body[data-mode="night"] .scene>.day-scene{opacity:0;filter:none!important}
body[data-mode="night"] .scene>.night-scene{opacity:1;filter:none!important}
body[data-mode="night"] .scene::after{opacity:0}

/* A feathered duplicate of just the cat gently rises and rumbles, leaving the
   couch and the rest of the painted scene completely still. */
.cat-purr{position:absolute;z-index:1;left:12.5%;top:56%;width:14%;height:15%;pointer-events:none;overflow:hidden;opacity:1;transition:opacity 1.6s ease;-webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 52%,#000 34%,transparent 78%);mask-image:radial-gradient(ellipse 68% 58% at 50% 52%,#000 34%,transparent 78%)}
.cat-purr>img{position:absolute;display:block;max-width:none;width:714.286%;height:666.667%;left:-89.286%;top:-373.333%;transform-origin:20% 64%;animation:cat-purr 2.65s ease-in-out infinite;will-change:transform}
.night-purr{opacity:0}
body[data-mode="night"] .day-purr{opacity:0}
body[data-mode="night"] .night-purr{opacity:1}
@keyframes cat-purr{0%,100%{transform:translate(0,0) scaleY(1)}12%{transform:translate(.025%,-.03%) scaleY(1.001)}24%{transform:translate(-.025%,.01%) scaleY(1.003)}50%{transform:translate(.02%,.09%) scaleY(1.008)}63%{transform:translate(-.025%,.04%) scaleY(1.006)}78%{transform:translate(.025%,0) scaleY(1.003)}90%{transform:translate(-.02%,-.025%) scaleY(1.001)}}
@media(prefers-reduced-motion:reduce){.cat-purr>img{animation:none!important}}

/* The illustrated chalkboard is the doorway into Untangle. The percentage
   bounds follow the board in the responsive 16:9 scene. */
.scene .logo{left:.3%;top:17%;width:29%;height:31%;transform:none}
.scene .services{left:82.5%;top:48%;width:15%;height:17%;transform:rotate(-4deg)}
.scene .untangle{display:block;left:38.4%;top:47.2%;width:13.7%;height:26.7%;transform:rotate(-3deg);border-radius:4px;text-decoration:none}
.scene>.night-scene{filter:brightness(.38) saturate(.72) hue-rotate(12deg) contrast(1.16)!important}
body[data-mode="night"] .scene>.night-scene{filter:brightness(.38) saturate(.72) hue-rotate(12deg) contrast(1.16)!important}