@import url('./assets/michroma.css');
:root{--ink:#39445e;--soft:#65728c;--blue:#5c72b7;--accent:#b9d5ff;--bg:#e1e8f4;--sans:'Space Grotesk',sans-serif;--display:'Michroma',sans-serif;color-scheme:light}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:var(--sans);background:#cbd9ee}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #5b72b1;outline-offset:5px}button{transition:transform .25s,box-shadow .25s,color .25s}button:hover{color:#4e64a7}::selection{background:#a7bbec;color:#263455}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.world-backdrop{position:fixed;inset:0;background:url('./assets/sky-room.png') center center/cover no-repeat;z-index:-2}.world-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#e6eafd18,transparent 60%),linear-gradient(0deg,#edf0fa35,transparent 35%)}.film-grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}.world{height:100svh;min-height:720px;display:flex;flex-direction:column;overflow:hidden;position:relative;padding:0 52px}.header{height:115px;display:flex;align-items:center;gap:34px;flex-shrink:0;position:relative;z-index:5}.logo{font-family:var(--display);font-size:45px;font-style:italic;letter-spacing:-5px;line-height:1;position:relative;color:#f2f5fb;text-shadow:0 1px 0 #7685a3,0 2px 0 #a5b4ca,0 -1px 0 #fff,0 5px 9px #677ca34d}.logo span{font-family:var(--sans);font-size:28px;letter-spacing:0;position:absolute;right:-28px;top:-10px;transform:rotate(-12deg);font-style:normal;text-shadow:0 1px 0 #7685a3,0 -1px 0 white}.header nav{margin-left:auto;display:flex;align-items:center;gap:35px}.nav-link{font-size:12px;padding:12px 0;position:relative;opacity:.75}.nav-link.active{opacity:1}.nav-link.active:after{content:'';height:3px;width:3px;background:var(--ink);border-radius:50%;position:absolute;bottom:3px;left:50%}.round-button{border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:linear-gradient(150deg,#ffffffbb,#b6c4dc77);border:1px solid #f7faffaa;box-shadow:inset 0 -2px 3px #7c8fa133,1px 3px 6px #6b7c9c15}.round-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.4}.round-button[aria-pressed=true]{color:#4565af;background:linear-gradient(150deg,#f5f9ff,#a8bde7)}.room{flex:1;position:relative;min-height:460px;isolation:isolate}.scene{position:absolute;top:-7%;left:23%;width:65%;height:114%;z-index:2;touch-action:pan-y;cursor:grab}.scene:active{cursor:grabbing}.scene canvas{display:block;width:100%;height:100%}.word-art{position:absolute;top:18%;left:4%;font:italic 400 clamp(42px,5.1vw,86px)/1.02 var(--display);letter-spacing:-4px;z-index:1;color:#eef2fc;text-shadow:0 1px 0 #91a1bd,0 2px 1px #8c9cb9,0 -1px 0 #ffffff,0 6px 16px #5a72a928;pointer-events:none;user-select:none}.word-art>span{display:block;margin-left:17px}.word-art>i{font:400 15px var(--sans);display:block;letter-spacing:1px;color:#617391;text-shadow:0 1px 3px #ffffff88;margin:19px 0 0 25px}.thought{position:absolute;left:76%;top:21%;width:205px;padding:19px 21px;border-radius:22px 22px 22px 4px;background:linear-gradient(150deg,#ffffffa8,#edf4ff66);border:1px solid #ffffffe0;box-shadow:inset 0 1px 2px #fff9,0 8px 25px #6681a717;backdrop-filter:blur(12px);z-index:3;transition:transform .6s,opacity .5s;transform:rotate(2deg)}.thought-name{display:flex;justify-content:space-between;font-size:11px;color:#667b9d}.thought-name i{font-style:normal;color:#b1a0bc;font-size:15px}.thought p{font-size:13px;line-height:1.75;margin:10px 0 0;min-height:46px;color:#475a78}.thought.changing{opacity:0;transform:translateY(8px) rotate(2deg)}.small-note{position:absolute;bottom:13%;left:7%;display:flex;align-items:center;gap:14px;transform:rotate(-5deg);z-index:3}.note-star{font-size:45px;color:#edf4ff;text-shadow:1px 2px 1px #8194b2,-1px -1px 0 #fff,0 5px 9px #8b9ec244;line-height:1}.small-note p{font-size:11px;line-height:1.6;color:#6a7a92;letter-spacing:.2px}.current-mood{position:absolute;bottom:3%;left:54.5%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font-size:10px;color:#64718c;white-space:nowrap;z-index:4;background:#f7faff55;padding:7px 13px;border-radius:20px;backdrop-filter:blur(6px);border:1px solid #ffffff77}.mood-dot{height:4px;width:4px;background:#8b9fc9;border-radius:50%;box-shadow:0 0 0 3px #b0c3e433}.view-tools{position:absolute;right:0;bottom:9%;z-index:4;display:flex;gap:10px;align-items:center;color:#7c89a0}.view-button{font-size:9px;padding:7px 0;opacity:.65}.view-button.active{opacity:1;color:#435b86;border-bottom:1px solid #7188b16b}.view-tools>span{font-size:10px;opacity:.4}.footer{height:136px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.footer-note,.footer-signature{font-size:10px;color:#74829c}.footer-note{padding:12px 0}.footer-note span{margin-left:9px}.footer-signature span{margin-left:6px;color:#8597b6}.dock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:25px;display:flex;align-items:center;padding:9px 11px;background:linear-gradient(180deg,#ffffffd4 0%,#dce5f1c2 45%,#b9c8ddb8 51%,#eaf2fbd9 100%);box-shadow:inset 0 1px 1px white,inset 0 -2px 3px #7186a05c,0 6px 12px #687b9c2b,0 0 0 1px #fff8;backdrop-filter:blur(18px);gap:5px;min-height:69px}.dock button{display:flex;align-items:center;justify-content:center}.dock svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.3}.dock-main{padding:11px 15px;gap:11px;border-radius:17px;background:linear-gradient(180deg,#f7fbffdf,#b2c4e6bb);box-shadow:inset 0 1px 0 white,inset 0 -1px 2px #748cb55c,0 2px 3px #55699117;white-space:nowrap;font-size:12px}.dock-main i{font-style:normal;font-size:18px;margin-left:9px;color:#687fa7}.dock-main:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 white,inset 0 -1px 2px #748cb55c,0 5px 7px #55699133}.dock-divider{height:28px;width:1px;background:#879fbe33;margin:0 6px;box-shadow:1px 0 0 #fff9}.dock-icon{flex-direction:column;gap:5px;width:65px;height:48px;border-radius:16px;color:#5d708f}.dock-icon span{font-size:8px}.dock-icon:hover{background:#ffffff55}.model-loader{position:absolute;top:42%;left:54%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;font-size:12px;color:#667897;transition:opacity .8s;max-width:210px;text-align:center}.model-loader.finished{opacity:0;pointer-events:none}.loading-flower{font-size:55px;color:white;text-shadow:1px 2px 2px #7b8ca9;display:block;animation:turn 8s linear infinite;margin-bottom:20px}@keyframes turn{to{transform:rotate(360deg)}}.load-track{height:2px;width:100px;background:#fff6;margin:15px auto}.load-track span{display:block;background:#7188b6;height:2px;transition:width .2s}#retry-load{margin-top:10px;border-bottom:1px solid #7a8fb2;padding:8px}.toast{position:fixed;bottom:140px;left:50%;transform:translate(-50%,15px);background:#f6f9ffdd;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:17px;box-shadow:0 5px 25px #56709826;z-index:40;padding:13px 22px;font-size:11px;color:#576b8f;pointer-events:none;opacity:0;transition:.3s;max-width:calc(100vw - 30px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
.window{width:430px;max-width:calc(100vw - 30px);max-height:calc(100svh - 45px);padding:0;border:1px solid #fff;border-radius:18px;background:linear-gradient(145deg,#f7f9fff5,#e5ecf7f5);color:var(--ink);box-shadow:0 14px 60px #5c74904a,inset 0 0 0 4px #d2dce970;backdrop-filter:blur(25px);overflow:auto}.window::backdrop{background:#bdcce343;backdrop-filter:blur(8px)}.window[open]{animation:open .35s ease both}@keyframes open{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:none}}.window-bar{padding:10px 15px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#f7faff,#d6deeb);box-shadow:inset 0 1px 0 white;border-bottom:1px solid #b7c5dc77;border-radius:17px 17px 0 0;position:sticky;top:0;z-index:2;font-size:10px;color:#6b7d98}.window-bar button{font-size:19px;background:linear-gradient(#fff,#c3d0e7);border:1px solid #adbed788;box-shadow:inset 0 1px white;border-radius:7px;line-height:20px;height:25px;width:28px;color:#70819b}.chat-intro{padding:25px 25px 15px}.chat-intro>span{font-size:29px;font-weight:500;letter-spacing:-1px;color:#54698d}.chat-intro>small{display:block;font-size:11px;color:#8793a7;margin-top:6px}.chat-messages{height:245px;overflow:auto;padding:10px 25px 15px;scrollbar-width:thin;scrollbar-color:#c0cce0 transparent}.chat-message{max-width:90%;margin-bottom:17px}.chat-message small{font-size:9px;color:#8291ac}.chat-message p{font-size:12px;line-height:1.8;background:#ffffff9e;border:1px solid #fff;border-radius:0 14px 14px;padding:11px 14px;margin:6px 0;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 3px 8px #7c92ae0b}.from-you{margin-left:auto;text-align:right}.from-you p{background:#d7e2f6a8;border-color:#c8d6ec88;border-radius:14px 0 14px 14px}.suggestions{display:flex;gap:6px;padding:0 25px 13px;flex-wrap:wrap}.suggestions button{font-size:9px;background:#f3f6fc;border:1px solid #b9c7de66;border-radius:20px;padding:7px 10px;color:#7386a5}.suggestions button:hover{background:white}#chat-form{margin:0 25px;display:flex;border:1px solid #b9c8dc;border-radius:13px;background:#ffffffaa;overflow:hidden;box-shadow:inset 0 2px 4px #7b8eab0b}#chat-input{width:100%;min-width:0;background:none;border:0;padding:13px;font:12px var(--sans);color:var(--ink)}#chat-form button{width:43px;flex-shrink:0;font-size:21px;background:linear-gradient(#e6efff,#c1d0e9);color:#61789c}.chat-note{font-size:8px;text-align:center;padding:13px 10px 21px;color:#8a95a7}.window-content{padding:28px}.window-content h2{font:400 24px/1.3 var(--sans);letter-spacing:-.6px;color:#4f668d;margin:0 0 16px}.window-content>p{font-size:12px;color:#7787a0;line-height:1.85}.window-content .about-lead{font-size:15px;color:#566d91}.credits{border-top:1px solid #c4d1e366;margin-top:24px;padding-top:16px;color:#8390a7;font-size:10px;line-height:1.8}.credits h3{font-size:12px;color:#7085a6;font-weight:400}.credits a{text-decoration:underline;text-underline-offset:3px}.settings-window{width:390px}.setting-label{display:flex;justify-content:space-between;font-size:11px;color:#7185a5;margin:25px 0 15px}input[type=range]{appearance:none;width:100%;height:4px;background:#c4d1e7;border-radius:5px;accent-color:#8b9fc6;cursor:pointer;margin:4px 0 10px}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:linear-gradient(#fff,#9eafd0);border:1px solid #889cbb;box-shadow:0 1px 4px #6a7b9233}.palette-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 28px}.palette{display:flex;align-items:center;gap:6px;font-size:10px;color:#7c8aa0;border-radius:18px;padding:6px}.palette i{width:13px;height:13px;background:#b9d5ff;border:2px solid white;border-radius:50%;box-shadow:0 1px 3px #596d8e33}.palette[data-color=pearl] i{background:#f2e8d6}.palette[data-color=rose] i{background:#e9bed7}.palette.active{background:#fff9;box-shadow:0 0 0 1px #b6c6df66}.soft-button{width:100%;border-radius:13px;border:1px solid #aabcda66;background:linear-gradient(#f9fbff,#d6e1f3);box-shadow:inset 0 1px white,0 2px 4px #7185a115;padding:12px;font-size:11px;color:#687ea3}.soft-button>span{margin-left:15px}#memory-form{margin:22px 0}#memory-input{background:#fff9;border:1px solid #c2d0e5;border-radius:13px;width:100%;padding:14px;color:var(--ink);font:12px/1.7 var(--sans);resize:vertical;min-height:85px;margin-bottom:9px}.memory{padding:15px 0;border-top:1px solid #c7d2e466}.memory-head{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#8b99af}.memory-head button{font-size:9px;color:#92a0b8}.memory p{font-size:12px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere;color:#627797}.privacy-note{font-size:8px;color:#8e9bb0;display:block;margin-top:18px}.empty-memory{font-size:11px;color:#90a0b8;line-height:1.8;padding:8px 0}
@media(min-width:1600px){.world{padding:0 75px}.header{height:140px}.logo{font-size:52px}.header nav{gap:40px}.nav-link{font-size:13px}.footer{height:150px}.thought{width:230px;padding:22px 25px}.thought p{font-size:14px}.word-art{font-size:87px}.scene{left:22%;width:66%}.current-mood{bottom:1%}.small-note p{font-size:12px}}
@media(max-width:1100px){.world{padding:0 32px}.header{height:100px}.header nav{gap:25px}.logo{font-size:38px}.word-art{font-size:49px;letter-spacing:-2px;left:1%;top:22%}.thought{left:auto;right:0;width:180px;top:20%;padding:16px 18px}.thought p{font-size:11px}.scene{left:18%;width:76%}.small-note{left:2%}.small-note p{font-size:9px}.footer-signature{font-size:8px}.footer-note{font-size:8px}.footer{height:125px}.dock{min-height:65px;padding:8px}.dock-main{font-size:11px;padding:10px 13px}.dock-icon{width:57px}.view-tools{font-size:8px;bottom:5%;gap:7px}.view-button{font-size:8px}.current-mood{left:55%;bottom:2%}}
@media(max-width:760px){.world{padding:0 22px;min-height:760px}.header{height:90px;gap:22px}.header nav{gap:21px}.nav-link{font-size:10px}.logo{font-size:33px;letter-spacing:-4px}.logo span{font-size:23px;right:-22px}.round-button{width:32px;height:32px}.word-art{font-size:41px;top:13%;left:1%;letter-spacing:-2px}.word-art>i{font-size:12px;margin:12px 0 0 17px}.scene{left:10%;width:90%;top:2%;height:104%}.thought{top:11%;right:0;width:157px;padding:15px;border-radius:18px 18px 18px 3px}.thought p{font-size:10px;line-height:1.75;margin-top:8px}.thought-name{font-size:9px}.small-note{bottom:15%;left:0;gap:9px}.small-note p{font-size:8px}.note-star{font-size:32px}.current-mood{left:57%;bottom:0;font-size:8px;padding:6px 11px}.view-tools{bottom:9%;right:0;flex-direction:column;gap:0}.view-tools>span{display:none}.view-button{font-size:7px;padding:6px}.footer{height:115px}.footer-note,.footer-signature{display:none}.dock{left:50%;width:max-content}.world-backdrop{background-position:46% center}}
@media(max-width:480px){.world{padding:0 19px;min-height:720px}.header{height:83px;gap:15px}.header nav{gap:15px}.nav-link{font-size:9px}.logo{font-size:28px;letter-spacing:-3px}.logo span{font-size:19px;right:-19px;top:-7px}.round-button{height:28px;width:28px;margin-left:0}.round-button svg{width:14px}.header nav{margin-left:auto}.word-art{font-size:36px;left:0;top:5%;letter-spacing:-2px}.word-art>span{margin-left:8px}.word-art>i{font-size:10px;margin:10px 0 0 11px}.thought{right:-2px;top:13%;width:132px;padding:12px 13px;transform:rotate(3deg)}.thought p{font-size:9px;line-height:1.7;min-height:40px}.thought-name{font-size:8px}.scene{left:-11%;width:130%;height:105%;top:5%}.room{min-height:500px}.small-note{bottom:16%;left:0;transform:rotate(-6deg);max-width:100px;gap:6px}.small-note p{font-size:7px}.note-star{font-size:26px}.current-mood{left:52%;bottom:0%;font-size:8px;padding:6px 10px}.view-tools{bottom:13%;right:-3px}.view-button{font-size:6px;padding:6px 3px}.footer{height:112px}.dock{border-radius:23px;padding:8px 9px;gap:3px}.dock-main{padding:11px 12px;font-size:11px;gap:8px;border-radius:16px}.dock-main svg{width:19px}.dock-main i{margin-left:4px}.dock-icon{width:53px}.dock-icon svg{width:19px}.dock-icon span{font-size:7px}.dock-divider{margin:0 4px}.world-backdrop{background-position:51% center}.world-backdrop:after{background:linear-gradient(#eef3ff15,#e7efff33)}.toast{bottom:120px;font-size:10px;max-width:90%;width:max-content}.window-content{padding:24px}.chat-messages{height:220px}.chat-intro{padding-top:22px}.chat-intro>span{font-size:25px}.chat-intro small{font-size:10px}.chat-note{font-size:7px}.window{max-height:calc(100svh - 30px)}.palette-buttons{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.voice-settings{border-top:1px solid #c4d1e366;margin:8px 0 24px}.voice-settings select{width:100%;min-width:0;border:1px solid #c1cde0;border-radius:10px;background:#f8faffbb;padding:11px;color:var(--ink);font:11px var(--sans)}.voice-settings p{font-size:10px;line-height:1.6;color:#617797;margin:12px 0 6px}.voice-settings small{font-size:9px;line-height:1.6;color:#8291a7;display:block}.voice-link{float:right;font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:0 0 4px}.voice-link[aria-pressed=true]{color:#4e65a2}select:focus-visible{outline:2px solid #5b72b1;outline-offset:3px}

.voice-samples{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.voice-samples button{font-size:10px;border:1px solid #bdcce3;border-radius:16px;padding:8px 10px;background:#f8fbffb0}.voice-samples button:hover{background:white}.voice-performer{font-size:12px!important;color:#506b92!important}

.voice-samples button[aria-pressed=true]{background:#d7e3f6;box-shadow:inset 0 1px white;border-color:#91a8cb}

.dock{flex-direction:column;gap:0;padding:9px 11px 8px}.dock-actions{display:flex;align-items:center;gap:5px}.launch-links{display:flex;align-items:center;justify-content:center;gap:16px;align-self:stretch;margin:7px 9px 0;padding:9px 3px 1px;border-top:1px solid #879fbe40;box-shadow:inset 0 1px #ffffff80;color:#3f5679}.launch-x,.launch-ca{display:flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap}.launch-x{padding:0}.launch-x:disabled{opacity:1;cursor:default;color:#3f5679}.launch-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}.launch-x span,.launch-ca>span{font-size:10px;color:#526887}.launch-ca{padding-left:16px;border-left:1px solid #8fa4c14a}.launch-ca b{font:400 9px var(--display);letter-spacing:.3px}.footer{height:160px}@media(max-width:760px){.footer{height:150px}.dock{padding:9px 10px 9px}.dock-actions{gap:3px}}

.launch-x:hover{color:#253e6c}.launch-x:hover span{color:#253e6c}

.launch-ca{padding-top:0;padding-bottom:0;padding-right:0}.launch-ca:hover,.launch-ca:hover>span{color:#253e6c}