@charset "utf-8";
:root{--paper:#f9f4e5;--cream:#fffaf0;--ink:#203b30;--muted:#5e6d5f;--line:#b6c2a7;--leaf:#c9e6a3;--leaf-dark:#32704d;--coral:#ee987c;--sun:#f4cb75;--radius:18px;font-family:'Trebuchet MS',Verdana,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:280px;background:radial-gradient(#d5d5ae 0.6px,transparent .7px) 0 0/19px 19px,var(--paper)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #146346;outline-offset:4px}
button:disabled{cursor:not-allowed}
.app-shell{max-width:1200px;margin:auto;padding:0 clamp(18px,4vw,56px)}
.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid var(--line);gap:20px}
.brand{color:var(--ink);font-family:Georgia,serif;font-size:35px;font-weight:900;letter-spacing:-2px;text-decoration:none;display:flex;gap:7px;align-items:center;line-height:1}
.brand-mark{display:grid;place-items:center;font-family:Georgia,serif;font-size:28px;width:34px;height:34px;border-radius:50%;background:var(--sun);transform:rotate(-13deg);letter-spacing:0}
.brand-period{color:#d07654}
.edition,.eyebrow,.stage-label,.stage-bottom,.note-kicker,.note-meta,footer{font-size:11px;letter-spacing:.13em;font-weight:800}
.edition{white-space:nowrap}.edition span{font-size:18px;color:#d07654;margin-left:8px}
.intro{padding:36px 0 26px;position:relative}
.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;margin:0 0 17px;color:var(--leaf-dark)}
.eyebrow-star{color:#c77750;font-size:23px;line-height:.6}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(49px,6.2vw,81px);line-height:.98;letter-spacing:-.057em;margin:0 0 20px;font-weight:700}
h1 em{color:#4d7d52;font-weight:400}
.intro-copy{font-size:16px;line-height:1.55;max-width:480px;margin:0;color:#45594a}
.experience{display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);gap:17px;min-height:460px}
.stage{background:#d6e8b0;border:2px solid var(--ink);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:5px 6px 0 var(--ink);position:relative;min-width:0}
.stage[data-personality="sarcastic"]{background:#efd2b7}.stage[data-personality="corporate"]{background:#e1e8ca}.stage[data-personality="drill-sergeant"]{background:#c9dfc5}
.stage:before{content:"";position:absolute;inset:26px;border:1px dashed #a3bc83;border-radius:50%;transform:scaleX(.88);pointer-events:none}
.stage-top,.stage-bottom{display:flex;align-items:center;justify-content:space-between;z-index:1;padding:19px 22px}
.stage-top{color:#385439}.stage-doodle{font-size:21px;color:#658b58}
.stage-center{flex:1;display:grid;place-items:center;position:relative;min-height:320px}
.stage-center:before{content:"";position:absolute;width:min(75%,345px);aspect-ratio:1;border-radius:50%;background:#f6dda2;box-shadow:0 0 0 15px #edebb9,0 0 0 17px #b6c99a}
.spuddy-button{position:relative;z-index:2;border:0;background:transparent;padding:0;width:min(78%,320px);aspect-ratio:1;transition:transform .2s ease;touch-action:manipulation}
.spuddy-button:hover{transform:rotate(-3deg) scale(1.035)}
.spuddy-button:active{transform:scale(.96)}
.spuddy{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 1px #78916b40)}
.spuddy-figure{transform-origin:50% 76%;animation:idle 3.4s ease-in-out infinite}
.spuddy-button.is-reacting .spuddy-figure{animation:boing .7s cubic-bezier(.2,.9,.3,1)}
.eyes{transform-origin:50% 50%;animation:blink 5.5s infinite}
.mouth{display:none}
.spuddy[data-mood="great"] .mouth-happy,.spuddy[data-mood="pretty-good"] .mouth-smile,.spuddy[data-mood="meh"] .mouth-soft,.spuddy[data-mood="stressed"] .mouth-worried,.spuddy[data-mood="exhausted"] .mouth-sleepy{display:block}
.spuddy[data-mood="exhausted"] .eyes{opacity:.65;transform:scaleY(.6);animation:none}
.spuddy[data-mood="stressed"] .brows{transform:translateY(4px) rotate(-3deg);transform-origin:center}
.accessory{display:none}.stage[data-personality="wholesome"] .accessory-wholesome,.stage[data-personality="corporate"] .accessory-corporate,.stage[data-personality="drill-sergeant"] .accessory-sergeant{display:block}
.stage[data-personality="sarcastic"] .brows path:first-child{transform:translateY(-5px) rotate(-8deg);transform-origin:123px 137px}
.stage[data-mood="great"] .eyes{animation-duration:3.8s}
.stage[data-mood="exhausted"] .spuddy-figure{animation:restful 5s ease-in-out infinite}
.stage[data-mood="stressed"] .spuddy-figure{animation:restful 4s ease-in-out infinite}
.stage[data-personality="sarcastic"] .spuddy-button.is-reacting .spuddy-figure{animation:sassy .65s ease-out}
.stage[data-personality="corporate"] .spuddy-button.is-reacting .spuddy-figure{animation:nod .65s ease-out}
.stage[data-personality="drill-sergeant"] .spuddy-button.is-reacting .spuddy-figure{animation:boing .6s cubic-bezier(.2,.9,.3,1)}
.stage[data-mood="exhausted"] .spuddy-button.is-reacting .spuddy-figure,.stage[data-mood="stressed"] .spuddy-button.is-reacting .spuddy-figure{animation:gentle .7s ease-in-out}
.tap-bubble{position:absolute;z-index:3;top:6%;left:7%;max-width:145px;padding:8px 12px;border:2px solid var(--ink);border-radius:15px 15px 15px 2px;background:var(--cream);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.03em;text-align:center;box-shadow:2px 3px 0 #759768;opacity:0;transform:translateY(8px) rotate(-6deg) scale(.94);transition:opacity .2s,transform .2s;pointer-events:none}
.tap-bubble.is-visible{opacity:1;transform:translateY(0) rotate(-6deg) scale(1)}
.stage-spark{position:absolute;z-index:1;color:#60895b;line-height:1;animation:float 4s ease-in-out infinite}
.spark-one{left:14%;top:14%;font-size:40px}.spark-two{right:13%;top:22%;font-size:25px;animation-delay:-2s}.spark-three{right:18%;bottom:10%;font-size:33px;animation-delay:-1s}
.tap-hint{position:absolute;z-index:2;right:9%;bottom:5%;transform:rotate(-10deg);font-family:Georgia,serif;font-style:italic;font-size:16px;color:#476b48}.tap-hint span{font-size:21px}
.stage-bottom{border-top:1px solid #9ebd83;background:#c5dfa4;color:#325538;min-height:54px}.stage-bottom span:last-child{font-size:19px;color:#cc754f}
.conversation{background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:5px 6px 0 var(--ink);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.note-head{padding:20px 24px;border-bottom:1px solid #d4d7be;display:flex;align-items:center;justify-content:space-between;color:var(--leaf-dark)}
.note-flower{color:#d87d60;font-size:21px;line-height:.5}
.quote-wrap{display:flex;flex-direction:column;justify-content:center;flex:1;padding:24px clamp(22px,3vw,40px) 16px;min-height:214px}
.note-meta{color:#8d6a4d;margin:0 0 17px}
blockquote{font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3.15vw,39px);line-height:1.17;letter-spacing:-.033em;margin:0;max-width:570px;transition:opacity .18s ease}
blockquote::before{content:'“';color:#d78263;margin-right:1px}blockquote::after{content:'”';color:#d78263}
.note-signature{align-self:flex-end;font-family:Georgia,serif;font-style:italic;font-size:17px;margin:14px 4px 0 0;color:#527357}.note-signature span{color:#cc755f}
.conversation-actions{padding:0 25px 17px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.primary-button{border:2px solid var(--ink);border-radius:12px;background:var(--ink);color:#fffaf0;padding:16px 19px;font-weight:800;min-height:54px;box-shadow:3px 4px 0 #8faf84;transition:transform .15s,box-shadow .15s,background .15s}
.primary-button:hover{background:#315a44;transform:translateY(-2px);box-shadow:3px 6px 0 #8faf84}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #8faf84}
.primary-button span{margin-left:14px;font-size:22px;font-weight:400;line-height:0}
.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-weight:700;padding:13px 2px;min-height:44px}.text-button:hover{color:var(--leaf-dark)}.text-button span{font-size:22px;vertical-align:-2px;margin-right:3px}
.message-tools{border-top:1px solid #d4d7be;display:flex;min-height:52px}
.message-tools button{flex:1;border:0;border-right:1px solid #d4d7be;background:transparent;font-size:13px;font-weight:800;min-height:52px;transition:background .15s}
.message-tools button:last-child{border-right:0}.message-tools button:hover,.message-tools button[aria-pressed="true"]{background:#f3e6d0}.message-tools span{font-size:18px;vertical-align:-1px;margin-right:4px}
.controls-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:43px 0 38px}
.control-group{border:0;padding:0;margin:0;min-width:0}
.control-group legend{font-family:Georgia,serif;font-size:25px;font-weight:700;letter-spacing:-.035em;padding:0}.section-number{font-family:'Trebuchet MS',sans-serif;color:#bb7153;font-size:13px;letter-spacing:0;font-weight:800;margin-right:8px;vertical-align:4px}
.group-hint{font-size:13px;color:var(--muted);margin:7px 0 16px}
.chip-grid{display:grid;gap:9px}.mood-options{grid-template-columns:repeat(3,minmax(0,1fr))}.personality-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.chip-grid button{min-height:48px;border:1.5px solid #8b9b80;background:#fffbef;border-radius:10px;padding:8px 9px;font-size:13px;font-weight:700;white-space:normal;transition:transform .15s,background .15s,border-color .15s}
.chip-grid button:hover{transform:translateY(-2px);background:#edf3d9}.chip-grid button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fffaf0;box-shadow:2px 3px 0 #96ad85}.chip-grid button span{color:#bd724d;font-size:17px;margin-right:3px}.chip-grid button[aria-pressed="true"] span{color:var(--sun)}
.favorites{border-top:1.5px solid var(--line);padding:21px 0 26px}.favorites summary{cursor:pointer;font-family:Georgia,serif;font-size:23px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}.favorites summary::-webkit-details-marker{display:none}.favorites summary:before{content:'+';font-family:'Trebuchet MS',sans-serif;font-size:22px;margin-right:13px;color:#bd724d}.favorites[open] summary:before{content:'−'}.favorites summary span{font:700 12px 'Trebuchet MS',sans-serif;color:var(--muted);margin-left:auto}
.favorites-hint{color:var(--muted);font-size:13px}.favorites ul{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:8px}.favorites li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--cream);border:1px solid #c8d0b8;border-radius:10px}.favorites li span{font-family:Georgia,serif;font-size:17px;line-height:1.35}.favorites li button{flex:none;background:var(--paper);border:1px solid #82997c;border-radius:8px;min-height:44px;padding:6px 12px;font-size:13px;font-weight:700}.favorites li button:hover{background:var(--leaf)}
dialog{width:min(440px,calc(100vw - 32px));border:2px solid var(--ink);border-radius:18px;background:var(--cream);color:var(--ink);padding:24px;box-shadow:5px 6px 0 var(--ink)}
dialog::backdrop{background:#203b30ae}dialog h2{font:700 28px Georgia,serif;letter-spacing:-.03em;margin:0 0 10px}dialog p{line-height:1.5;color:var(--muted);margin:0 0 15px}dialog textarea{width:100%;resize:vertical;border:1.5px solid #82997c;border-radius:9px;padding:12px;font:17px/1.4 Georgia,serif;background:#fffdf6;color:var(--ink)}dialog textarea:focus-visible{outline:3px solid #146346;outline-offset:2px}dialog form{text-align:right;margin-top:14px}dialog button{border:2px solid var(--ink);background:var(--ink);color:#fffaf0;border-radius:9px;min-height:44px;padding:8px 14px;font-weight:800}
footer{border-top:1.5px solid var(--line);padding:24px 0 32px;display:flex;justify-content:space-between;gap:15px;line-height:1.6;color:#58694f}footer span:last-child{text-align:right}footer span span{color:#c06d50}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes boing{0%{transform:scale(1)}26%{transform:scale(1.09,.89) rotate(-8deg)}55%{transform:translateY(-29px) rotate(8deg) scale(.94,1.07)}78%{transform:scale(1.05,.96) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes blink{0%,44%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-11px) rotate(8deg)}}
@keyframes restful{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes gentle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes sassy{0%,100%{transform:rotate(0)}45%{transform:rotate(-12deg) translateY(-6px)}70%{transform:rotate(6deg)}}
@keyframes nod{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.92) translateY(6px)}75%{transform:scaleY(1.02)}}
@media(max-width:800px){.experience{grid-template-columns:1fr}.stage{min-height:390px}.stage-center{min-height:285px}.spuddy-button{width:min(64%,280px)}.conversation{min-height:380px}.controls-layout{gap:24px}}
@media(max-width:570px){.app-shell{padding:0 17px}.site-header{height:69px}.brand{font-size:30px}.brand-mark{width:30px;height:30px;font-size:24px}.edition{font-size:9px;letter-spacing:.03em;max-width:135px;text-align:right;line-height:1.3;white-space:normal;overflow-wrap:anywhere}.edition span{display:none}.intro{padding:28px 0 23px}h1{font-size:clamp(46px,12.5vw,65px);margin-bottom:16px}.intro-copy{font-size:14px}.experience{gap:13px}.stage{min-height:355px}.stage-center{min-height:245px}.spuddy-button{width:min(79%,282px)}.stage-top,.stage-bottom{padding:13px 17px}.stage:before{inset:20px}.tap-hint{font-size:13px;right:6%;bottom:3%}.conversation{min-height:362px}.quote-wrap{min-height:194px;padding:23px 23px 14px}blockquote{font-size:clamp(27px,7vw,37px)}.note-head{padding:17px 21px}.conversation-actions{padding:0 19px 15px;gap:6px 14px}.primary-button{flex:1;white-space:nowrap}.text-button{flex:1;white-space:nowrap}.controls-layout{display:block;margin:37px 0 30px}.control-group+.control-group{margin-top:30px}.control-group legend{font-size:24px}.mood-options{grid-template-columns:repeat(3,minmax(0,1fr))}.mood-options button{font-size:12px}.favorites summary{font-size:21px}footer{display:block;font-size:10px}footer span:last-child{display:block;text-align:left;margin-top:8px}}
@media(max-width:350px){.primary-button{font-size:14px}.conversation-actions{display:grid;grid-template-columns:1fr}.text-button{justify-self:center}.mood-options{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-center{min-height:220px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}