@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--ink:var(--experiments-colors-ceceee9);--muted:var(--experiments-colors-c9babae);--line:rgba(208,233,236,.16)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--experiments-colors-c070a10);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--experiments-colors-cb4eddf);outline-offset:5px}button{border:0}main{width:100%;height:100%;min-height:360px;background:radial-gradient(ellipse at 65% 45%,var(--experiments-colors-c14202e) 0,transparent 58%)}#field{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none;cursor:crosshair}#field:focus-visible{outline:1px solid var(--experiments-colors-c96d8d9);outline-offset:-5px}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,13,.3),transparent 18%,transparent 80%,rgba(5,8,13,.7))}header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:32px 42px;pointer-events:none}header>*{pointer-events:auto}.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-size:29px;font-weight:500;letter-spacing:-1.7px}.wordmark-dot{margin-left:-12px;color:var(--experiments-colors-cabddcf)}.mark{font-size:35px;font-weight:400;color:var(--experiments-colors-cc6e3db);margin-right:3px;letter-spacing:0}.edition{font-size:9px;letter-spacing:2.5px;color:var(--experiments-colors-ca7b5b8);display:flex;align-items:center;gap:10px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.edition>span{width:4px;height:4px;border-radius:50%;background:var(--experiments-colors-c98c3b6)}.round{width:36px;height:36px;background:rgba(12,20,28,.5);border:1px solid var(--line);border-radius:50%;font-family:Georgia,serif;font-size:16px;color:var(--experiments-colors-cc2c9c7);transition:background .2s}.round:hover{background:var(--experiments-colors-c233139)}.intro{position:absolute;left:8%;top:27%;pointer-events:none;transition:opacity 1.4s,transform 1.4s;max-width:420px}.eyebrow{font-size:9px;line-height:1.5;letter-spacing:2.1px;color:var(--experiments-colors-caebcbb);font-weight:500;margin:0 0 28px}h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(58px,6.6vw,106px);line-height:.99;font-weight:400;letter-spacing:-2px;margin:0 0 29px}h1 em{font-weight:400;color:var(--experiments-colors-ccce6df)}.invitation{font-size:13px;line-height:1.9;letter-spacing:.15px;color:var(--experiments-colors-ca9b6b7);margin:0}.playing .intro{opacity:0;transform:translateY(-12px)}.touch-hint{position:absolute;left:65%;top:57%;display:flex;align-items:center;gap:13px;pointer-events:none;font-size:8px;letter-spacing:2px;color:var(--experiments-colors-cc0d3d5);transition:opacity .8s}.hint-ring{width:27px;height:27px;display:block;border:1px solid var(--experiments-colors-cc1e8e357);border-radius:50%;position:relative}.hint-ring:after{content:'';position:absolute;inset:10px;background:var(--experiments-colors-cd6f5ec);border-radius:50%}.playing .touch-hint{opacity:0}footer{position:absolute;bottom:30px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}footer>*{pointer-events:auto}.footer-note{font-size:8px;line-height:1.9;letter-spacing:1.5px;color:var(--experiments-colors-c87989e);pointer-events:none}.dock{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:8px;background:rgba(16,23,31,.76);border:1px solid rgba(206,231,239,.16);border-radius:50px;box-shadow:0 9px 30px var(--experiments-colors-c0004),inset 0 1px 0 var(--experiments-colors-cffffff07);backdrop-filter:blur(20px)}.palettes{display:flex;align-items:center;gap:3px}.palette{display:flex;align-items:center;gap:8px;padding:11px 13px;background:transparent;border-radius:24px;color:var(--experiments-colors-ca9b6b9);font-size:11px;transition:background .25s,color .25s;min-height:42px}.palette.active{background:var(--experiments-colors-cc7e6df14);color:var(--experiments-colors-ceef5f0);box-shadow:inset 0 0 0 1px var(--experiments-colors-cc8e4e21a)}.palette:hover{background:var(--experiments-colors-ce2f7ff0e)}.swatch{width:15px;height:15px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px var(--experiments-colors-cffffff21)}.aurora{background:linear-gradient(135deg,var(--experiments-colors-c53d9c8),var(--experiments-colors-c7290db) 50%,var(--experiments-colors-cdc9dbd))}.ember{background:linear-gradient(135deg,var(--experiments-colors-cfce1a8),var(--experiments-colors-ced945c) 50%,var(--experiments-colors-ca93670))}.iris{background:linear-gradient(135deg,var(--experiments-colors-ca3beff),var(--experiments-colors-c985dda) 50%,var(--experiments-colors-ce99ecb))}.divider{height:23px;width:1px;background:var(--line);margin:0 6px}.icon-button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:transparent;color:var(--experiments-colors-cbdc9cb);transition:background .2s}.icon-button:hover{background:var(--experiments-colors-ce2f7ff12)}.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.live-note{font-size:8px;letter-spacing:1.7px;color:var(--experiments-colors-c94aaa6);display:flex;align-items:center;gap:8px;margin-left:auto;pointer-events:none}.live-note>span:first-child{width:4px;height:4px;background:var(--experiments-colors-c8dd7bf);box-shadow:0 0 8px var(--experiments-colors-c8dd7bf60);border-radius:50%}.paused .live-note>span:first-child{background:var(--experiments-colors-cbaa7d3)}.help{position:absolute;right:42px;top:90px;max-width:330px;padding:26px;background:var(--experiments-colors-c101820ed);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(24px);box-shadow:0 20px 70px var(--experiments-colors-c0005)}.help .eyebrow{font-size:8px;margin-bottom:16px}.help h2{font-family:'Instrument Serif',Georgia,serif;font-size:30px;font-weight:400;margin:0 0 14px}.help p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--experiments-colors-cb3c2c5)}.help .keyboard-help{font-size:10px!important;padding-top:12px;border-top:1px solid var(--line);margin-bottom:0}#toast{position:absolute;bottom:108px;left:50%;transform:translate(-50%,10px);padding:10px 16px;border-radius:30px;font-size:11px;color:var(--experiments-colors-cd1e3dd);pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;background:var(--experiments-colors-c16212bd9);border:1px solid var(--line);white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}#fallback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:420px;width:85%;padding:28px;background:var(--experiments-colors-c111b26e8);border:1px solid var(--line);border-radius:20px;z-index:5}#fallback h2{font-family:Georgia,serif;font-weight:400}#fallback p{font-size:14px;line-height:1.6;color:var(--experiments-colors-cb3c2c5)}#fallback button{border-radius:25px;padding:12px 20px;background:var(--experiments-colors-cc4e1d7);color:var(--experiments-colors-c15221f)}.noscript{position:absolute;top:45%;left:15%;background:var(--experiments-colors-c14212e);padding:20px}.failed .dock,.failed .touch-hint,.failed .intro{display:none}
@media(min-width:1800px){.intro{left:12%}}
@media(max-width:1000px){.footer-note,.live-note{display:none}footer{height:60px}.intro{left:7%}.edition{font-size:8px;letter-spacing:2px}h1{font-size:78px}}
@media(max-width:600px){header{padding:23px 23px}.wordmark{font-size:26px}.mark{font-size:29px}.edition{display:none}.intro{left:8%;top:18%;max-width:290px}.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:19px}h1{font-size:65px;line-height:1;letter-spacing:-1.5px;margin-bottom:18px}.invitation{font-size:12px;line-height:1.75}.touch-hint{left:48%;top:64%;font-size:7px;letter-spacing:1.4px}footer{bottom:max(22px,env(safe-area-inset-bottom));left:12px;right:12px}.dock{gap:1px;padding:6px;width:max-content;max-width:100%}.palette{padding:10px;gap:6px;font-size:10px;min-height:44px}.icon-button{width:36px;height:44px}.divider{margin:0 3px}.swatch{width:13px;height:13px}.help{right:20px;left:20px;top:80px;max-width:none;padding:23px}#toast{bottom:105px;font-size:10px}}
@media(max-width:370px){.palette{padding:10px 8px}.palette span:last-child{font-size:9px}.icon-button{width:33px}.dock{padding:5px}.divider{margin:0 2px}}
@media(max-height:540px) and (min-width:601px){header{padding:18px 28px}.intro{top:24%}h1{font-size:60px}.eyebrow{margin-bottom:13px}.invitation{display:none}footer{bottom:15px}.help{top:65px;max-height:calc(100% - 145px);overflow:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

#field:focus-visible{outline:none}.keyboard-input #field:focus-visible{outline:1px solid var(--experiments-colors-c96d8d9);outline-offset:-5px}
@media(max-width:600px){.intro{top:16%}h1{font-size:60px}.vignette{background:linear-gradient(180deg,rgba(5,8,13,.45),transparent 50%,transparent 80%,rgba(5,8,13,.7))}}

dialog{width:min(680px,90vw);max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:22px;padding:24px;background:var(--experiments-colors-c10171f);color:var(--ink);box-shadow:0 30px 100px var(--experiments-colors-c0009)}dialog::backdrop{background:var(--experiments-colors-c02070bbd);backdrop-filter:blur(12px)}.save-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.save-heading .eyebrow{font-size:8px;margin:0 0 8px}.save-heading h2{font-family:'Instrument Serif',Georgia,serif;font-size:34px;font-weight:400;margin:0}#saved-image{display:block;max-height:55dvh;max-width:100%;margin:0 auto;border-radius:10px}.download-link{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--experiments-colors-cc6e2d9);color:var(--experiments-colors-c14221d);border-radius:30px;padding:14px;text-decoration:none;font-size:12px;font-weight:500;margin-top:20px}.save-note{font-size:10px;color:var(--experiments-colors-ca4b4b8);text-align:center;margin:14px 0 0}


@media(min-width:601px) and (max-aspect-ratio:11/10){.intro{top:14%}h1{font-size:66px}.eyebrow{margin-bottom:20px}}
@media(max-width:370px){.palette{width:44px;height:44px;justify-content:center;padding:10px}.palette span:last-child{display:none}.swatch{width:17px;height:17px}.icon-button{width:44px}.dock{gap:2px;padding:6px}.divider{margin:0 4px}}

/* Quiet controls keep their positions and keyboard order. Pause remains visible. */
.header-actions{display:flex;gap:10px;align-items:center}
#fullscreen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
header>.wordmark,header>.edition,.header-actions,footer>.footer-note,footer>.live-note,.dock>:not(#pause){transition:opacity .7s ease}
.dock{transition:background .7s ease,border-color .7s ease,box-shadow .7s ease,backdrop-filter .7s ease}
body.ui-quiet header>.wordmark,body.ui-quiet header>.edition,body.ui-quiet .header-actions,body.ui-quiet footer>.footer-note,body.ui-quiet footer>.live-note,body.ui-quiet .dock>:not(#pause){opacity:.12}
body.ui-quiet .dock{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
body.ui-quiet #pause{background:rgba(12,18,27,.8);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
body:not(.ui-quiet) header>*,body:not(.ui-quiet) footer>*,body:not(.ui-quiet) .dock>*{transition-duration:.18s}
main:fullscreen{width:100%;height:100%;background:var(--experiments-colors-c070a10)}
@media(prefers-reduced-motion:reduce){header>*,footer>*,.dock,.dock>*{transition:none!important}}
.help{max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain}

.story-return{position:fixed;top:100px;left:42px;font-size:13px;color:var(--experiments-colors-ce5eeee);text-decoration:none;z-index:5;background:var(--experiments-colors-c10171fe6);padding:10px 14px;border-radius:22px}.story-return:focus-visible{outline:2px solid var(--experiments-colors-c94f1df);outline-offset:4px}@media(max-width:600px){.story-return{left:20px;top:76px}}
@media(max-width:600px){body:not(.playing) .intro{top:145px}.story-return{font-size:12px}}