@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');
:root{font-family:system-ui,-apple-system,sans-serif;color:#f2f0e9;background:#242e2c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}#camera{display:none}canvas{position:fixed;inset:0;width:100%;height:100%}#cursor{pointer-events:none}header{position:fixed;top:0;left:0;width:100%;padding:32px 42px;display:flex;align-items:center;gap:22px;z-index:3}.brand{color:inherit;text-decoration:none;font-family:'Noto Serif SC',serif;font-size:27px;letter-spacing:5px}.brand span{font:9px system-ui;letter-spacing:3px;display:block;margin-top:7px}.live{margin-left:auto;font-size:11px;letter-spacing:1px;display:flex;align-items:center;gap:9px;opacity:.8}.live i{height:5px;width:5px;background:#d1e1c1;border-radius:50%}button{font:inherit;color:inherit;border:1px solid #ffffff35;background:#ffffff08;border-radius:30px;padding:10px 17px;cursor:pointer;transition:.2s}button:hover{background:#ffffff22}button:disabled{opacity:.5;cursor:wait}#help{width:35px;height:35px;padding:0}main{position:fixed;top:24%;left:12%;z-index:2}.eyebrow{font-size:10px;letter-spacing:3px;color:#d5decf}h1{font-family:'Noto Serif SC',serif;font-size:clamp(50px,6vw,88px);font-weight:400;line-height:1.4;letter-spacing:5px;margin:24px 0}h1 span{color:#d4dfbe}main p{font-size:14px;color:#e2e6dd;line-height:2.1;letter-spacing:2px}.primary{background:#dce4cb;color:#29372e;border:0;padding:17px 25px;margin-top:23px;min-width:205px;display:flex;justify-content:space-between;gap:40px}.primary:hover{background:#ecf0e4}.text{display:block;border:0;background:transparent;padding:14px 0;font-size:12px;color:#d9dfd3}small{font-size:10px;opacity:.55;display:block;margin-top:19px}footer{position:fixed;bottom:25px;left:42px;right:42px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;opacity:.6;pointer-events:none}#toolbar{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;z-index:3}.modes{display:flex;justify-content:center;gap:24px;margin-bottom:14px;font-size:11px;text-shadow:0 1px 8px #000}.controls{display:flex;align-items:center;gap:17px;background:#1d2929a8;backdrop-filter:blur(20px);border:1px solid #ffffff25;padding:14px 20px;border-radius:22px;font-size:11px}.controls label{display:flex;align-items:center;gap:8px;white-space:nowrap}input[type=range]{width:72px;accent-color:#d4dfbe}input[type=checkbox]{accent-color:#d4dfbe}.controls button{font-size:11px;padding:9px 12px;white-space:nowrap}#guide{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:520px;max-width:90vw;padding:32px;background:#243430f5;border:1px solid #ffffff30;border-radius:20px;z-index:9;box-shadow:0 30px 100px #0007}#guide h2{font-family:'Noto Serif SC',serif;font-weight:400;margin-top:40px}#guide p{font-size:13px;line-height:1.9;color:#cdd6ce}#closeHelp{float:right;font-size:11px}#toast{position:fixed;top:110px;left:50%;transform:translateX(-50%);background:#1c292ee8;border-radius:15px;padding:13px 22px;font-size:12px;max-width:85vw;display:none;z-index:10;line-height:1.6}@media(max-width:700px){header{padding:23px}.live{font-size:9px}.brand{font-size:23px}main{left:9%;top:23%}.controls{flex-wrap:wrap;justify-content:center;gap:10px;width:92vw}.modes{gap:10px}footer{left:23px;right:23px}footer span:last-child{display:none}#toolbar{bottom:54px}small{max-width:260px;line-height:1.8}}

#intro{background:linear-gradient(110deg,#1b302c55,transparent);padding:20px 30px 24px;margin-left:-30px;border-radius:25px}#demo{text-align:left;width:auto;min-width:0}body:has(#intro:not([hidden])) #mirror{filter:brightness(.75)}[hidden]{display:none!important}

/* Winter window palette */
:root{color:#f3faff;background:#263f53}.eyebrow{color:#cde6f3}h1 span{color:#c5e8ff}.primary{background:#d9effc;color:#29495e}.primary:hover{background:#edf8ff}.live i{background:#c1e8ff}.controls{background:#19364cb8}input[type=range],input[type=checkbox]{accent-color:#b5dff7}#guide{background:#203c50f5}#guide p{color:#d2e7f3}#intro{background:linear-gradient(110deg,#17364d40,transparent);border-radius:3px}body:has(#intro:not([hidden])) #mirror{filter:brightness(.78)}main p{color:#e2f1f8}#toast{background:#17354be8}
@media(max-height:650px){main{top:17%}h1{font-size:48px;margin:12px 0}.primary{margin-top:12px}small{margin-top:8px}}