/* Hallmark · playful · reference-led desktop exhibition · oversized face + journal + companion
   User-authorized window chrome and rich motion. */
*{box-sizing:border-box}html,body{overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--color-paper);color:var(--color-ink);font:15px/1.65 var(--font-body);background-image:radial-gradient(var(--color-dot) .7px,transparent .7px);background-size:22px 22px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:disabled{opacity:.5;cursor:default}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.2;overflow-wrap:anywhere}img,svg{max-width:100%}a,button{transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui),box-shadow var(--dur-ui)}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--color-ink);outline-offset:5px}::selection{background:var(--color-accent);color:var(--color-ink)}.skip{position:fixed;top:-100px;left:20px;background:var(--color-accent);padding:12px;z-index:200}.skip:focus{top:20px}.site-frame{position:fixed;inset:10px;border:2px solid var(--color-ink);pointer-events:none;z-index:90;box-shadow:0 0 0 10px var(--color-paper)}.topbar{position:fixed;left:10px;right:10px;top:10px;height:62px;z-index:100;display:flex;align-items:center;gap:20px;background:var(--color-paper);border:2px solid var(--color-ink);padding:0 24px}.brand{display:flex;align-items:center;gap:12px;font:800 22px var(--font-display);letter-spacing:-1px}.brand svg{width:38px;fill:var(--color-ink)}.brand path{fill:none;stroke:var(--color-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.brand-dot{color:var(--color-ink)}.topbar nav{display:flex;margin-left:auto;gap:8px}.nav-key,.sound-key{border:2px solid var(--color-ink);padding:5px 12px;background:var(--color-surface);font:500 11px/1.5 var(--font-utility);box-shadow:2px 2px 0 var(--color-ink);white-space:nowrap}.nav-key:hover,.nav-key.active{background:var(--color-ink);color:var(--color-surface)}.nav-key:active,.action-key:active,.sound-key:active{transform:translate(2px,2px);box-shadow:none}.sound-key{font-size:15px;padding:3px 9px}.sound-key[aria-pressed=true]{background:var(--color-pink)}.face-hero{min-height:850px;height:100svh;max-height:1150px;position:relative;margin:0 12px;padding:112px 4.5vw 30px;isolation:isolate}.hero-topline{display:flex;justify-content:space-between;font:10px var(--font-utility);letter-spacing:1px;gap:20px}.status-dot:before{content:"";display:inline-block;width:7px;height:7px;background:var(--color-ink);margin-right:8px}.hero-heading{position:relative;width:max-content;margin:65px auto 0;z-index:3;text-align:center}.file-tag{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--color-ink);background:var(--color-surface);padding:3px 10px;font:10px/1.5 var(--font-utility);box-shadow:3px 3px 0 var(--color-ink)}.file-tag:before{content:"";width:6px;height:6px;background:var(--color-pink)}.hero-heading h1{font-size:clamp(42px,4.6vw,72px);letter-spacing:-3.5px;line-height:1.12;margin:22px 0 18px;font-weight:700}.hero-heading h1 span{background:linear-gradient(transparent 68%,var(--color-accent) 68%)}.hero-heading p{font-size:13px;line-height:1.8;color:var(--color-ink-soft)}.giant-face{position:absolute;inset:15% 1.5% 9%;z-index:2;pointer-events:none}.giant-eyes{position:absolute;inset:0;width:100%;height:70%;fill:var(--color-ink)}.eye-pair{transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .25s var(--ease-out)}.big-mouth{position:absolute;top:55%;left:0;width:100%;padding:0;background:transparent;pointer-events:auto}.big-mouth svg{width:100%;overflow:visible;display:block}.big-mouth path{stroke:var(--color-ink);stroke-width:30;fill:none;stroke-linejoin:round;stroke-linecap:round;transition:transform .65s var(--ease-out)}.big-mouth:hover{transform:translateY(-4px)}.mouth-menu{position:absolute;left:23%;right:23%;top:63%;display:flex;gap:16px;justify-content:center;opacity:0;transform:translateY(15px) scale(.96);transition:transform .5s var(--ease-out),opacity .3s;pointer-events:none}.mouth-menu a{background:var(--color-ink);color:var(--color-surface);padding:14px 20px;font-size:13px;display:flex;gap:20px;white-space:nowrap;border:2px solid var(--color-ink)}.mouth-menu a:hover{background:var(--color-accent);color:var(--color-ink)}.mouth-open .mouth-menu{opacity:1;transform:none;pointer-events:auto}.desktop-note{position:absolute;z-index:4;width:260px;display:block;background:var(--color-surface);border:2px solid var(--color-ink);box-shadow:6px 6px 0 var(--color-ink)}.desktop-note:hover{transform:translateY(-6px) rotate(0)}.note-work{left:8%;top:51%;transform:rotate(-5deg)}.note-blog{right:8%;top:49%;transform:rotate(5deg)}.window-bar{min-height:34px;padding:8px 12px;display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--color-ink);font:10px/1.4 var(--font-utility);background:var(--color-surface);color:var(--color-ink)}.window-bar i{width:7px;height:7px;background:var(--color-pink);flex:none}.window-bar>span:last-child{margin-left:auto}.note-content{display:flex;align-items:center;gap:15px;padding:18px 15px;font-size:14px;font-weight:600}.note-content small{display:block;font-size:10px;font-weight:400;margin-top:4px;color:var(--color-ink-soft)}.pixel-bracket,.paper-lines{font:600 30px var(--font-utility);padding:4px 10px;background:var(--color-accent)}.paper-lines{background:var(--color-pink)}.hero-bottom{position:absolute;bottom:35px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;gap:20px;font:10px var(--font-utility)}.hero-bottom>a{display:flex;gap:20px;align-items:center}.hero-bottom>a>span{font-size:22px}.tiny-zig{font-size:22px;margin-left:10px}.pixel-flower{position:absolute;color:var(--color-pink);font-size:70px;z-index:0;text-shadow:2px 2px 0 var(--color-ink);animation:flower-spin 22s linear infinite}.flower-one{top:20%;right:8%}.flower-two{bottom:15%;left:8%;font-size:40px;color:var(--color-accent)}.ticker{margin:0 12px;background:var(--color-accent);border-block:2px solid var(--color-ink);overflow:hidden;padding:14px 0;font:600 13px var(--font-utility);letter-spacing:1px}.ticker>div{width:max-content;animation:ticker 45s linear infinite}.ticker span{margin:0 30px}.content-wrap{max-width:1330px;margin:auto;padding:110px 5vw}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:42px}.section-head h2{font-size:clamp(30px,3vw,46px);letter-spacing:-2px;margin-top:19px}.section-head h2>span{color:var(--color-ink-soft)}.section-head p{font-size:13px;color:var(--color-ink-soft);line-height:1.9}.work-area{padding:90px 5vw 100px;margin:0 12px;background:var(--color-dark);color:var(--color-paper)}.work-area>.section-head{max-width:1200px;margin:0 auto 44px}.work-area .section-head p{color:var(--color-paper-strong)}.work-area .file-tag{color:var(--color-ink);background:var(--color-accent);box-shadow:3px 3px 0 var(--color-accent)}.work-display{display:grid;grid-template-columns:160px minmax(0,1fr) 290px;position:relative;max-width:1220px;margin:auto;align-items:center;gap:0}.work-sidebar{align-self:stretch;padding:20px 20px 20px 0;display:flex;flex-direction:column;gap:16px}.mono{font:10px var(--font-utility);letter-spacing:1px}.work-sidebar>.mono{color:var(--color-paper-strong);margin-bottom:14px}.project-key{background:transparent;color:var(--color-paper);display:flex;gap:12px;padding:12px 0;font-size:12px;text-align:left;white-space:nowrap}.project-key span{font:10px var(--font-utility);padding-top:3px}.project-key b{margin-left:auto}.project-key.selected{color:var(--color-accent)}.sidebar-bottom{margin-top:auto;color:var(--color-paper-strong);font-size:10px;line-height:1.9}.project-art{min-height:560px;background:var(--color-art);color:var(--color-ink);position:relative;display:flex;align-items:center;justify-content:center;padding:35px 25px;isolation:isolate;overflow:hidden}.art-index{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font:800 330px var(--font-display);letter-spacing:-40px;opacity:.11;z-index:-1;transform:rotate(-12deg)}.bot-demo{width:100%;max-width:360px;transform:rotate(-4deg);background:var(--color-surface);border:2px solid var(--color-ink);box-shadow:10px 10px 0 var(--color-ink);transition:transform .4s var(--ease-out)}.bot-demo:hover{transform:rotate(0)}.demo-top{padding:15px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--color-ink);font-weight:600;font-size:14px}.mini-face{padding:5px;background:var(--color-paper-strong);font-size:21px}.demo-top small{display:block;font-weight:400;font-size:9px;margin-top:4px}.demo-badge{margin-left:auto;font:9px var(--font-utility);border:1px solid var(--color-ink);padding:3px}.chat-feed{padding:20px 15px;min-height:230px;max-height:265px;overflow:auto;display:flex;flex-direction:column;gap:12px;background:var(--color-paper)}.chat{border:1px solid var(--color-ink);padding:10px 12px;font-size:11px;max-width:88%;background:var(--color-surface);align-self:flex-start;animation:chat-in .3s var(--ease-out)}.chat.mine{align-self:flex-end;background:var(--color-pink)}.chat-actions{padding:14px 12px;display:flex;gap:8px;border-top:2px solid var(--color-ink)}.chat-actions button{background:var(--color-accent);padding:5px 10px;border:1px solid var(--color-ink);font-size:11px;box-shadow:2px 2px 0 var(--color-ink)}.chat-actions button:active{transform:translate(2px,2px);box-shadow:none}.art-caption{position:absolute;bottom:18px;font-size:9px}.project-info{position:relative;margin-left:-25px;border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:8px 8px 0 var(--color-pink);color:var(--color-ink);z-index:2;transform:translateY(45px)}.info-body{padding:28px 24px}.info-body>.mono{color:var(--color-ink-soft)}.info-body h3{font-size:34px;margin:18px 0}.info-body p{font-size:12px;line-height:1.9;color:var(--color-ink-soft)}.info-body dl{border-top:1px solid var(--color-rule);margin:25px 0}.info-body dl>div{display:flex;justify-content:space-between;font-size:10px;gap:10px;margin:12px 0}.info-body dt{color:var(--color-ink-soft)}.info-body dd{margin:0;text-align:right}.action-key{display:inline-flex;align-items:center;gap:20px;background:var(--color-ink);color:var(--color-surface);border:2px solid var(--color-ink);padding:10px 15px;box-shadow:3px 3px 0 var(--color-pink);font-size:12px;white-space:nowrap}.action-key:hover{background:var(--color-accent);color:var(--color-ink)}.site-demo{display:flex;flex-direction:column;text-align:center;gap:20px}.site-demo svg{fill:var(--color-ink)}.site-demo path{fill:none;stroke:var(--color-ink);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.site-demo strong{font:800 48px var(--font-display)}.site-demo>span{font-size:12px}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.lab-card{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:6px 6px 0 var(--color-ink);min-width:0}.lab-card:nth-child(2){transform:translateY(25px)}.lab-caption{padding:21px 18px;border-top:2px solid var(--color-ink)}.lab-caption h3{font-size:15px;letter-spacing:-.5px}.lab-caption>span{font-size:10px;color:var(--color-ink-soft);display:block;margin-top:10px}.type-experiment,.depth-experiment,.color-experiment{height:245px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.type-experiment{background:var(--color-pink);font:800 clamp(28px,3.7vw,54px) var(--font-display);letter-spacing:-3px;gap:1px}.type-experiment span:nth-child(even){transform:translateY(-12px) rotate(-9deg)}.type-experiment span:nth-child(odd){transform:translateY(12px) rotate(9deg)}.type-experiment b{align-self:center;color:var(--color-surface);text-shadow:2px 2px 0 var(--color-ink);font-size:90px;transform:rotate(15deg)}.type-experiment.running span{animation:letter-dance .65s var(--ease-out) both;animation-delay:calc(var(--i) * 80ms)}.depth-experiment{background:var(--color-paper-strong);perspective:650px;cursor:grab}.depth-block{position:relative;width:95px;height:95px;transform-style:preserve-3d;transform:rotateX(var(--rx,-22deg)) rotateY(var(--ry,-32deg));transition:transform .25s var(--ease-out);z-index:1}.depth-block span{position:absolute;inset:0;display:grid;place-items:center;border:2px solid var(--color-ink);background:var(--color-accent);font:800 65px var(--font-display);backface-visibility:visible}.depth-block span:first-child{transform:translateZ(47px)}.depth-block span:nth-child(2){transform:rotateY(90deg) translateZ(47px);background:var(--color-pink)}.depth-block span:nth-child(3){transform:rotateX(90deg) translateZ(47px);background:var(--color-lime)}.orbit-ring{position:absolute;width:210px;height:110px;border:1px solid var(--color-ink);border-radius:50%;transform:rotate(-30deg);opacity:.5}.color-experiment{background:var(--color-lime);flex-direction:column;padding:20px 25px;--mixer-color:oklch(70% .17 280)}.color-blob{width:120px;height:120px;border:2px solid var(--color-ink);background:var(--mixer-color);border-radius:38% 62% 60% 40%/60% 43% 57% 40%;box-shadow:5px 5px 0 var(--color-ink);transform:rotate(-15deg);margin-bottom:20px}.color-experiment label{display:flex;justify-content:space-between;width:100%;font-size:10px}.color-experiment input{width:100%;accent-color:var(--color-ink);margin-top:8px}.notes-area{padding-top:45px}.text-link{font-size:12px;border-bottom:1px solid var(--color-ink);padding-bottom:3px;white-space:nowrap}.text-link:hover{color:var(--color-ink-soft)}.notes-window{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:7px 7px 0 var(--color-paper-strong)}.notes-toolbar{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--color-ink);padding:15px 22px;background:var(--color-paper-strong)}.note-filters{display:flex;gap:7px}.note-filters button{font-size:11px;padding:4px 15px;background:var(--color-surface);border:1px solid var(--color-ink);white-space:nowrap}.note-filters button.selected{background:var(--color-ink);color:var(--color-surface)}.search-box{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--color-ink);max-width:210px}.search-box input{border:0;outline-offset:2px;background:transparent;width:100%;min-width:0;font-size:11px}.note-row{display:grid;grid-template-columns:60px minmax(0,1fr) 100px 25px;align-items:center;gap:24px;padding:26px 30px;border-bottom:1px solid var(--color-rule)}.note-row:hover{background:var(--color-paper);transform:translateX(3px)}.note-icon{width:58px;height:58px;display:grid;place-items:center;background:var(--color-accent);border:1.5px solid var(--color-ink);font:600 22px var(--font-utility)}.note-icon.pink{background:var(--color-pink)}.note-icon.lime{background:var(--color-lime)}.note-row small{font:9px var(--font-utility);letter-spacing:1px;color:var(--color-ink-soft)}.note-row h3{font-size:21px;margin:6px 0;letter-spacing:-.6px}.note-row p{font-size:11px;color:var(--color-ink-soft)}.note-row time{font:10px var(--font-utility);color:var(--color-ink-soft)}.note-row>b{font-size:24px;font-weight:400}.notes-status{padding:10px 22px;display:flex;justify-content:space-between;font-size:10px;color:var(--color-ink-soft)}.no-results{padding:50px 24px;font-size:13px}.about-area{border-top:2px solid var(--color-ink);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:70px;align-items:center;padding-top:95px;padding-bottom:110px}.about-text h2{font-size:clamp(32px,3.4vw,50px);line-height:1.35;letter-spacing:-2px;margin:25px 0}.about-text h2>span{color:var(--color-ink-soft)}.about-text p{font-size:13px;color:var(--color-ink-soft);line-height:1.95;margin-bottom:14px}.skill-tags{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0}.skill-tags span{font:10px var(--font-utility);border:1px solid var(--color-ink);padding:5px 9px;background:var(--color-surface)}.contact-links{display:flex;align-items:center;gap:30px;margin-top:28px}.companion-window{background:var(--color-surface);border:2px solid var(--color-ink);box-shadow:8px 8px 0 var(--color-accent);transform:rotate(2deg)}.companion-caption{border-top:1px solid var(--color-rule);padding:18px 25px;display:flex;flex-direction:column;gap:4px;text-align:center;font-size:13px}.companion-caption>span{font-size:10px;color:var(--color-ink-soft)}yeti-companion{display:block;min-height:310px}.footer-wordmark{font:800 clamp(50px,15vw,230px)/1 var(--font-display);letter-spacing:-.075em;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;color:var(--color-ink);overflow:hidden}.footer-wordmark>span{font-size:.85em;color:var(--color-pink);margin-left:10px}.footer-line{border-top:2px solid var(--color-ink);margin:25px 5vw 0;display:flex;justify-content:space-between;padding:22px 0 35px;gap:20px;font:10px var(--font-utility)}footer{padding:35px 12px 0}.intro{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-accent);pointer-events:none;animation:intro-exit .7s var(--ease-in-out) 1s both}.intro>span{font:800 clamp(25px,5vw,50px) var(--font-display);letter-spacing:-2px}.intro svg{width:min(550px,80vw);fill:var(--color-ink);margin:25px}.intro path{fill:none;stroke:var(--color-ink);stroke-width:14;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:800;animation:draw-mouth 1s var(--ease-out)}.intro small{font-size:12px}.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-paused .intro{display:none}.motion-paused .eye-pair{transform:none}.motion-paused{scroll-behavior:auto}@keyframes intro-exit{to{transform:translateY(-105%)}}@keyframes draw-mouth{from{stroke-dashoffset:800}to{stroke-dashoffset:0}}@keyframes flower-spin{to{transform:rotate(360deg)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes chat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes letter-dance{0%{transform:translateY(15px) rotate(-20deg)}40%{transform:translateY(-35px) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}
@media(min-width:1500px){.face-hero{min-height:950px}.hero-heading{margin-top:100px}.hero-heading h1{font-size:80px}.desktop-note{width:310px}.note-content{padding:24px}.giant-face{inset:13% 4% 7%}}
@media(max-width:1050px){.hero-heading h1{font-size:54px}.desktop-note{width:220px}.note-work{left:6%;top:53%}.note-blog{right:6%;top:52%}.note-content{gap:10px;padding:13px 10px}.note-content small{font-size:9px}.work-display{grid-template-columns:125px minmax(0,1fr) 240px}.project-info{margin-left:-35px}.info-body{padding:22px 18px}.project-art{padding:30px 18px}.bot-demo{transform:rotate(-2deg)}.demo-top{padding:10px;gap:8px}.demo-top small{font-size:8px}.mini-face{font-size:16px}.demo-badge{display:none}.about-area{gap:40px}}
@media(max-width:760px){.topbar{padding:0 13px;height:57px;gap:10px}.brand{font-size:18px;gap:7px}.brand svg{width:27px}.topbar nav{gap:6px}.nav-key{font-size:9px;padding:5px 8px}.sound-key{display:none}.face-hero{min-height:760px;max-height:950px;padding-top:93px}.hero-topline{font-size:8px}.status-dot{display:none}.hero-heading{margin-top:56px}.hero-heading h1{font-size:48px;letter-spacing:-2.5px}.hero-heading p{font-size:12px}.giant-face{inset:29% 0 8%}.giant-eyes{height:65%}.big-mouth{top:54%}.big-mouth path{stroke-width:27}.desktop-note{width:190px}.note-work{top:55%;left:7%}.note-blog{top:57%;right:7%}.note-content{font-size:12px}.note-content small{font-size:8px}.pixel-bracket,.paper-lines{font-size:21px}.flower-one{font-size:45px;top:19%;right:7%}.flower-two{bottom:12%;font-size:28px}.hero-bottom{font-size:8px;bottom:25px}.hero-bottom>a{gap:5px}.mouth-menu{left:5%;right:5%;top:64%;gap:8px}.mouth-menu a{font-size:11px;padding:10px 12px;gap:12px}.content-wrap{padding:75px 6vw}.section-head{align-items:start;flex-direction:column;gap:18px;margin-bottom:28px}.section-head h2{font-size:32px;letter-spacing:-1.5px}.section-head p{font-size:12px}.work-area{padding:65px 6vw}.work-display{grid-template-columns:minmax(0,1fr)}.work-sidebar{flex-direction:row;padding:0 0 20px;align-items:center;gap:25px}.work-sidebar>.mono,.sidebar-bottom{display:none}.project-key{gap:10px}.project-key b{margin-left:5px}.project-art{min-height:440px;padding-bottom:55px}.bot-demo{max-width:330px}.project-info{margin:-20px 16px 0 40px;transform:none}.info-body h3{font-size:30px;margin:12px 0}.info-body dl{margin:18px 0}.info-body p{font-size:12px}.lab-grid{gap:20px;grid-template-columns:minmax(0,1fr)}.lab-card:nth-child(2){transform:none}.type-experiment{font-size:70px}.type-experiment,.depth-experiment,.color-experiment{height:240px}.lab-caption{display:flex;justify-content:space-between;align-items:center;gap:10px}.lab-caption>span{margin:0;font-size:9px}.notes-area{padding-top:15px}.note-row{padding:22px 18px;gap:15px;grid-template-columns:44px minmax(0,1fr) 18px}.note-icon{width:44px;height:48px;font-size:18px}.note-row time{grid-column:2;font-size:9px;margin-top:-9px}.note-row>b{grid-column:3;grid-row:auto}.note-row h3{font-size:18px}.note-row p{font-size:10px}.note-row small{font-size:8px}.note-row>div{grid-column:2}.note-row>b{grid-column:3;grid-row:1}.note-row{position:relative}.note-row>b{position:absolute;right:16px}.notes-toolbar{padding:12px;gap:15px}.note-filters button{padding:4px 10px;font-size:10px}.search-box{max-width:150px}.notes-status{font-size:9px;padding:10px 14px}.about-area{grid-template-columns:minmax(0,1fr);gap:40px;margin:0 6vw;padding:60px 0 80px}.about-text h2{font-size:38px}.companion-window{max-width:480px;width:100%;margin:auto;transform:rotate(1deg)}.footer-line{font-size:8px;flex-wrap:wrap;gap:12px}.footer-line>span:nth-child(2){display:none}.footer-wordmark{font-size:14vw}}
@media(max-width:420px){.brand svg{display:none}.brand{font-size:16px}.topbar{padding:0 10px}.nav-key{font-size:8px;padding:5px 6px}.topbar nav{gap:5px}.face-hero{min-height:715px}.hero-heading{margin-top:42px}.hero-heading h1{font-size:41px}.hero-heading p{font-size:11px}.desktop-note{width:145px}.note-work{left:5%;top:55%}.note-blog{right:5%;top:57%}.window-bar{font-size:8px;padding:7px 9px;min-height:30px}.note-content{font-size:11px;gap:8px;padding:12px 8px}.note-content small{display:none}.pixel-bracket,.paper-lines{font-size:18px;padding:3px 5px}.hero-bottom{font-size:7px}.hero-bottom>span{max-width:145px;line-height:1.7}.tiny-zig{display:none}.section-head h2{font-size:28px}.lab-caption{flex-direction:column;align-items:start}.notes-toolbar{gap:9px}.search-box{max-width:110px}.note-filters{gap:4px}.note-filters button{padding:4px 8px}.notes-status>span:last-child{font-size:8px}.mouth-menu{gap:5px}.mouth-menu a{padding:8px;font-size:10px;gap:5px}.about-text h2{font-size:33px}.about-text p{font-size:12px}.desktop-only{display:none}.contact-links{gap:20px}.hero-topline{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.intro{display:none}.eye-pair{transform:none}.ticker>div{transform:none}.type-experiment span{transform:none!important}}
/* Final integration: mobile face silhouette and companion controls. */
yeti-companion{inline-size:100%;font-family:var(--font-body)}

.page-away *,.page-away *:before,.page-away *:after{animation-play-state:paused!important}
@media(max-width:760px){.big-mouth{top:72%}.mouth-menu{top:79%}}
@media(max-width:420px){.desktop-note{width:140px}.note-work{left:4%}.note-blog{right:4%}}
@media(max-width:350px){.desktop-note{width:123px}.note-content{font-size:10px}.note-work{left:3%}.note-blog{right:3%}.topbar{padding:0 7px;gap:5px}.brand{font-size:14px}.nav-key{padding:5px}.notes-toolbar{flex-wrap:wrap}.search-box{max-width:none;width:100%}.notes-status>span:last-child{display:none}.type-experiment{font-size:55px}.about-text h2{font-size:30px}.contact-links{gap:14px}}
.ticker:hover>div{animation-play-state:paused}
@media(max-width:420px){.note-blog .note-content>span:last-child{font-size:9px;white-space:nowrap}}
@media(max-width:760px){.sound-key{display:block;position:fixed;bottom:25px;right:25px;padding:5px 10px;background:var(--color-surface);z-index:101}.companion-window{transform:none}}
/* Final visual review: hierarchy 4/5, execution 4/5, specificity 5/5.
   Rich motion and retro windows follow the user's selected reference. */
/* Original face coordinates: 800 × 620. Eyes and mouth share ONE SVG
   so viewport height, letterboxing, and breakpoints cannot change their ratio. */
.giant-face {
  inset:auto;left:50%;top:50%;width:min(94%,72rem);
  aspect-ratio:800/620;transform:translate(-50%,-42%);
}
.giant-eyes {inset:0;width:100%;height:100%;overflow:visible}
.face-mouth path {
  fill:none;stroke:var(--color-ink);stroke-width:32;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .65s var(--ease-out);
}
.big-mouth {inset:48% 0 auto;width:100%;height:26%;z-index:2}
.big-mouth:hover {transform:none}
.mouth-menu {top:56%;left:20%;right:20%;z-index:3;align-items:center}
.note-work {top:auto;bottom:100px}
.note-blog {top:auto;bottom:115px}
@media(max-width:760px){
  .giant-face {inset:auto;left:50%;top:50%;width:94%;transform:translate(-50%,-42%)}
  .big-mouth {inset:48% 0 auto;height:26%}
  .mouth-menu {top:55%;left:4%;right:4%;gap:7px}
  .mouth-menu a {padding:8px 10px;font-size:10px}
  .note-work {top:auto;bottom:125px}
  .note-blog {top:auto;bottom:105px}
  .flower-two {bottom:28%;left:12%}
}
@media(max-width:420px){
  .mouth-menu a {font-size:9px;padding:7px;gap:5px}
}
@media(min-width:761px){.note-work{bottom:65px}.note-blog{bottom:75px}}
.mouth-open .mouth-menu{top:63%}
/* Original blog greeting and shared logo geometry. */
.hero-bottom{justify-content:flex-end}
.brand svg{width:38px;height:auto;aspect-ratio:800/620;overflow:visible}
.brand path{stroke-width:32}
.greeting-return{grid-column:1/-1;display:flex;align-items:center;gap:48px;padding:0 0 48px;border-bottom:1px solid var(--color-rule)}
.greeting-spinner{width:170px;height:170px;padding:0;flex:none;background:transparent;border-radius:50%}
.greeting-spinner .greeting-avatar-image{display:block;width:100%;height:100%;fill:var(--color-paper-strong)}
.greeting-face{fill:var(--color-ink)}
.greeting-face path{fill:none;stroke:var(--color-ink);stroke-width:32;stroke-linejoin:round;stroke-linecap:round}

.greeting-words h2{font-size:clamp(32px,3.5vw,48px);letter-spacing:-2px;min-height:1.25em;margin-bottom:12px}
.greeting-words p{font-size:13px;line-height:1.9}
.greeting-words .hello-english{font:500 15px/1.9 var(--font-utility);margin-bottom:8px}
.greeting-words p:last-child{margin-top:6px}
.hello-cursor{animation:hello-blink .8s steps(1,end) infinite}




@keyframes hello-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:760px){
.greeting-return{gap:26px;padding-bottom:35px}.greeting-spinner{width:120px;height:120px}
.greeting-words h2{font-size:31px;letter-spacing:-1.5px}.greeting-words p{font-size:11px}
.brand svg{display:block;width:24px}.brand{font-size:14px;gap:6px}
}
@media(max-width:420px){.greeting-return{gap:20px;flex-direction:column;align-items:flex-start}.greeting-spinner{width:105px;height:105px}.greeting-words h2{font-size:36px}.greeting-words p{font-size:12px}.brand svg{width:22px}.brand{font-size:13px}.topbar{gap:7px}}
@media(max-width:350px){.brand{font-size:12px;gap:4px}.brand svg{width:20px}.topbar{gap:5px;padding-inline:7px}.topbar nav{gap:4px}.nav-key{padding-inline:4px}}
@media(prefers-reduced-motion:reduce){.greeting-spinner .greeting-avatar-image,.hello-cursor{animation:none}}


/* Restored from the original blog: rounded-full shadow-lg outside the
   pointer-directed inner artwork; 100 ms tracking, 1 s return to upright. */
.greeting-spinner{
  overflow:hidden;box-shadow:0 10px 15px -3px var(--color-avatar-shadow),0 4px 6px -4px var(--color-avatar-shadow);
  background:var(--color-paper-strong);
}
.greeting-spinner .greeting-avatar-image{
  animation:none;transform:rotate(0deg);transform-origin:center;
  transition:transform 1s;will-change:transform;
}
.greeting-spinner.is-tracking .greeting-avatar-image{transition:transform .1s}
.hello-cursor{animation-duration:1s}
@media(prefers-reduced-motion:reduce){.greeting-spinner .greeting-avatar-image{transition:none;transform:none!important}}
.greeting-spinner .greeting-avatar-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;user-select:none}

/* Keep pointer coordinates aligned with the snowball playfield. */
.companion-window{transform:none}

/* The reference mouth: black opening, zigzag edges and a curved pink tongue. */
.face-mouth .mouth-shape{
  fill:var(--color-ink);stroke-linejoin:round;
  d:path("M0 338 100 406 200 338 300 406 400 338 500 406 600 338 700 406 800 338 800 338 700 406 600 338 500 406 400 338 300 406 200 338 100 406 0 338 Z");
  transition:d .65s var(--ease-out),stroke .4s,stroke-width .65s var(--ease-out);
}
.mouth-open .mouth-shape{
  d:path("M0 310 100 370 200 310 300 370 400 310 500 370 600 310 700 370 800 310 800 522 700 582 600 522 500 582 400 522 300 582 200 522 100 582 0 522 Z");
}
.big-mouth{top:48%;height:38%}
.mouth-menu,.mouth-open .mouth-menu{top:67.1%;transform:translateY(-50%)}
.mouth-menu{visibility:hidden}
.mouth-open .mouth-menu{visibility:visible}
/* Clear glass, bright bevels and a soft shadow retain the plum frame. */
.topbar{
  background:linear-gradient(115deg,rgba(255,255,255,.76),rgba(250,245,255,.36) 55%,rgba(255,255,255,.65));
  -webkit-backdrop-filter:blur(20px) saturate(155%);
  backdrop-filter:blur(20px) saturate(155%);
  border-color:rgba(57,39,63,.62);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.75),0 8px 24px rgba(57,39,63,.09);
}
.topbar:before,.mouth-menu a:before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at var(--glass-x,24%) var(--glass-y,0%),rgba(255,255,255,.7),transparent 65%);
}
.topbar>.brand,.topbar>nav{position:relative}
.mouth-menu a{
  position:relative;isolation:isolate;overflow:hidden;min-height:44px;align-items:center;
  color:var(--color-ink);border:1px solid rgba(255,255,255,.86);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.19) 55%,rgba(255,255,255,.43));
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(155,99,130,.14),0 5px 12px rgba(94,45,76,.12);
}
.mouth-menu a:hover{background:rgba(255,255,255,.7);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(94,45,76,.18)}
.mouth-menu a:active{transform:translateY(0)}
@supports not (backdrop-filter:blur(1px)){
 .topbar{background:rgba(252,249,255,.96)}
 .mouth-menu a{background:#fff4f9}
}
@media(prefers-reduced-motion:reduce){.face-mouth .mouth-shape{transition:none}}
.motion-paused .face-mouth .mouth-shape{transition:none}

/* Keep the mobile fixed motion control relative to the viewport. */
.topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.topbar:before{
 background:radial-gradient(ellipse at var(--glass-x,24%) var(--glass-y,0%),rgba(255,255,255,.7),transparent 65%),linear-gradient(115deg,rgba(255,255,255,.76),rgba(250,245,255,.36) 55%,rgba(255,255,255,.65));
 -webkit-backdrop-filter:blur(20px) saturate(155%);backdrop-filter:blur(20px) saturate(155%);
}
@supports not (backdrop-filter:blur(1px)){.topbar:before{background:rgba(252,249,255,.96)}}

.mouth-open .mouth-shape{stroke:var(--color-ink);stroke-width:16}
.mouth-tongue{fill:#ee609e;opacity:0;transition:opacity .3s;pointer-events:none}
.mouth-open .mouth-tongue{opacity:1;transition:opacity .35s .1s}
.big-mouth{height:47%}
.mouth-menu,.mouth-open .mouth-menu{top:72%;}
@media(prefers-reduced-motion:reduce){.mouth-tongue{transition:none!important}}
.motion-paused .mouth-tongue{transition:none!important}

.mouth-clip,.mouth-border{d:path("M0 338 100 406 200 338 300 406 400 338 500 406 600 338 700 406 800 338 800 338 700 406 600 338 500 406 400 338 300 406 200 338 100 406 0 338 Z");transition:d .65s var(--ease-out)}
.mouth-open .mouth-clip,.mouth-open .mouth-border{d:path("M0 310 100 370 200 310 300 370 400 310 500 370 600 310 700 370 800 310 800 522 700 582 600 522 500 582 400 522 300 582 200 522 100 582 0 522 Z")}

.mouth-menu a{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68) 55%,rgba(255,255,255,.8))}
@media(prefers-reduced-motion:reduce){.mouth-clip{transition:none}}
.motion-paused .mouth-clip{transition:none}

/* Redraw the outline above the tongue so all four edges have equal weight. */
.face-mouth .mouth-border{fill:none;stroke:var(--color-ink);stroke-width:16;stroke-linejoin:round;stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .3s,d .65s var(--ease-out)}
.mouth-open .mouth-border{opacity:1}
@media(prefers-reduced-motion:reduce){.face-mouth .mouth-border{transition:none}}

/* Two soft highlights appear only with the open-mouth expression. */
.eye-shine{fill:#fff;pointer-events:none}
.eye-glints{opacity:0;transform:scale(.65);transform-box:fill-box;transform-origin:center;transition:opacity .24s ease,transform .38s cubic-bezier(.2,.8,.3,1.25)}
.mouth-open .eye-glints{opacity:1;transform:scale(1)}
.eye-glints circle{transform-box:fill-box;transform-origin:center}
.mouth-open .glint-large{animation:eye-glimmer 2.8s ease-in-out .35s infinite}
.mouth-open .glint-small{animation:eye-glimmer 2.8s ease-in-out .7s infinite reverse}
@keyframes eye-glimmer{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.82}}
@media(prefers-reduced-motion:reduce){.eye-glints{transition:none}.eye-glints circle{animation:none!important}}
.motion-paused .eye-glints{transition:none}

/* Snow belongs to the first section and settles just above the ticker. */
.hero-snow{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.eye-glints{transition:opacity .45s ease,transform .65s ease}
.face-mouth .mouth-shape{transition:d .9s cubic-bezier(.25,.1,.25,1),stroke .6s,stroke-width .9s ease}
.mouth-clip{transition:d .9s cubic-bezier(.25,.1,.25,1)}
.face-mouth .mouth-border{transition:opacity .5s,d .9s cubic-bezier(.25,.1,.25,1)}
@media(prefers-reduced-motion:reduce){.face-mouth .mouth-shape,.mouth-clip,.face-mouth .mouth-border,.eye-glints{transition:none}}