.home-fun{margin:30px 0;padding:28px;border:1px solid #e9e4de;border-radius:28px;background:linear-gradient(135deg,#fffaf5,#fbf8ff 60%,#f3fbf8);box-shadow:0 12px 45px #634a3810;color:#29434a}.hf-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.hf-heading h2{font-size:clamp(23px,2.3vw,32px);line-height:1.4;margin:3px 0}.hf-heading p{margin:3px 0;color:#6c7b79}.hf-tiny-flower{font-size:70px;color:#eaae9e;text-shadow:0 4px 0 #fff8,3px 7px 12px #ad7a4730}.hf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hf-grid>section,.hf-quiz{min-width:0;background:#ffffffad;border:1px solid #fff;border-radius:22px;padding:22px;box-shadow:0 4px 17px #75544108}.hf-grid h3,.hf-quiz h3{margin:0 0 13px;font-size:18px}.hf-note{font-size:12px!important;line-height:1.65;color:#75827e!important;margin:9px 0}.hf-mood-bubble{display:flex;align-items:center;gap:15px;min-height:84px;background:#f4f0f6;border-radius:18px 18px 18px 3px;padding:15px;margin-bottom:16px;overflow-wrap:anywhere}.hf-mood-bubble>span{font-size:38px;filter:drop-shadow(0 4px 3px #785f5b1c)}.hf-mood-bubble strong{font-size:18px}.hf-mood-bubble p{margin:5px 0 0;white-space:pre-wrap;font-size:14px}.hf-mood-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.hf-button{appearance:none;min-height:44px;border:1px solid #e7e5e2;border-radius:13px;padding:9px 13px;font:inherit;font-size:13px;font-weight:600;color:#45585b;background:linear-gradient(#fff,#f7f6f3);box-shadow:0 2px 0 #d9d6d14d,inset 0 1px 1px #fff;cursor:pointer;transition:transform .15s,border-color .15s}.hf-button:hover:not(:disabled){transform:translateY(-1px);border-color:#bea2a1}.hf-button:disabled{opacity:.5;cursor:default}.hf-button[aria-pressed=true]{background:linear-gradient(#fff0eb,#f5ddd8);border-color:#dba69b;box-shadow:inset 0 1px #fff,0 2px #dbb8aa3b;color:#8a4d42}.hf-mood-choices button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:8px 4px;min-height:66px;font-size:11px;line-height:1.45;overflow-wrap:anywhere}.hf-mood-choices button>span:first-child{font-size:23px}.hf-label{display:block;font-size:12px;font-weight:600;margin:14px 0 7px}.hf-music-head{display:flex;align-items:flex-start;gap:15px;justify-content:space-between}.hf-music-head>div:first-child{min-width:0}.hf-vinyl{position:relative;width:94px;height:94px;flex-shrink:0;border-radius:50%;background:repeating-radial-gradient(circle,#343a3e 0 2px,#242b30 3px 4px);box-shadow:0 6px 12px #28353b24,inset 0 0 0 3px #747d7e,inset 0 0 0 4px #000;transform:rotate(-20deg)}.hf-vinyl:before{content:'';position:absolute;inset:0;border-radius:inherit;background:conic-gradient(transparent,#fff2,transparent 35%,#fff2,transparent 80%)}.hf-vinyl i{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#353b40 0 3px,#fff9 3px 4px,var(--hf-track) 5px);box-shadow:inset 0 1px 5px #fff8}.hf-vinyl.is-playing{animation:hf-spin 8s linear infinite}.hf-track-name{display:block;font-size:22px;letter-spacing:-.5px;margin:8px 0}.hf-player{display:flex;align-items:center;gap:14px;margin:17px 0}.hf-play{width:46px;height:46px;min-width:46px;border:1px solid #ffffffd9;border-radius:50%;font-size:18px;color:#57676b;background:radial-gradient(ellipse at 30% 20%,#fffffff2,#ffffff90 40%,#d8e7e5);box-shadow:inset 0 2px 4px #fff,0 4px 0 #b8c6c580,0 6px 15px #3f606225;cursor:pointer}.hf-play:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 3px #fff,0 2px 0 #b8c6c5}.hf-play:disabled{opacity:.45;cursor:default}.hf-volume{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:#7b8c8b}.hf-volume input{width:100%;min-width:0;accent-color:#8bafa4}.hf-equalizer{letter-spacing:2px;color:#ac9aac;font-size:20px}.hf-equalizer.is-playing{animation:hf-bounce .9s ease-in-out infinite alternate}.hf-tracks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hf-tracks button{text-align:start;font-size:12px;display:flex;gap:7px;align-items:center}.hf-tracks button>span{width:10px;height:10px;border-radius:50%;background:var(--hf-dot);box-shadow:inset 0 1px 1px #fffc}.hf-greetings{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}.hf-greetings button{padding:8px 10px;font-size:12px}.hf-greeting-card{display:flex;align-items:center;gap:12px;background:#f0f7f4;padding:17px;border-radius:16px}.hf-greeting-card>span{font-size:29px}.hf-greeting-card>div{flex:1;min-width:0}.hf-greeting-card strong{font-size:20px;display:block;line-height:1.5}.hf-greeting-card p{font-size:12px;margin:4px 0;overflow-wrap:anywhere}.hf-reading{color:#8a6b62}.hf-record{margin-top:15px}.hf-record summary{font-size:13px;font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}.hf-record summary:before{content:'+';color:#b19083;font-size:20px}.hf-record[open] summary:before{content:'−'}.hf-record-actions{display:flex;gap:7px;flex-wrap:wrap}.hf-button.is-recording{color:#b24646;border-color:#d9a5a5;background:#fff0f0}.hf-stamp-count{font-size:13px;letter-spacing:.3px;color:#ac8675;margin:0 0 18px}.hf-stamp-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.hf-stamp{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0;background:linear-gradient(#fffef9,#fbf3e9);border:1px dashed #dfc9b7;border-radius:13px;padding:13px 4px;color:#8c7466;font-size:10px;line-height:1.5;box-shadow:0 3px 0 #cbb9a51a;cursor:pointer;overflow-wrap:anywhere}.hf-stamp>span:first-child{font-size:28px;filter:drop-shadow(0 2px 1px #c49e762e)}.hf-stamp small{font-size:11px;color:#b2927e}.hf-stamp:disabled{cursor:default}.hf-stamp[aria-pressed=true]{background:#f6e0d2;border:2px solid #d29f81;transform:rotate(-3deg)}.hf-quiz{margin-top:18px;background:#fffbf4}.hf-quiz>div:first-child{display:flex;align-items:center;gap:13px}.hf-quiz>div:first-child>span{font-size:32px}.hf-quiz>div:first-child>div{flex:1}.hf-quiz h3{margin:0 0 3px}.hf-quiz p{font-size:13px;margin:4px 0}.hf-quiz-options{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 7px}.hf-quiz-result{min-height:21px;color:#9b7662}.hf-quiz-result.is-won{color:#598873;font-weight:600}.hf-save{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.hf-save>div{display:flex;gap:8px;flex-shrink:0}.hf-save [data-hf=save]{background:linear-gradient(#718f87,#55776e);color:#fff;border-color:#58776f;box-shadow:inset 0 1px #a4bdb4,0 3px 0 #3c615a}.hf-feedback{color:#55836d;font-size:13px}.hf-error{color:#a05348;font-size:13px}.home-fun button:focus-visible,.home-fun input:focus-visible,.home-fun summary:focus-visible{outline:3px solid #e6a679;outline-offset:3px}.home-fun button{touch-action:manipulation}.home-fun input.field{font-size:16px}.hf-secondary{background:#ffffff85}@keyframes hf-spin{to{transform:rotate(340deg)}}@keyframes hf-bounce{to{opacity:.45;transform:scaleY(.7)}}@media(max-width:700px){.home-fun{padding:18px 14px;margin:20px 0;border-radius:24px}.hf-grid{grid-template-columns:1fr;gap:12px}.hf-grid>section,.hf-quiz{padding:17px;border-radius:19px}.hf-heading{margin-bottom:17px;gap:10px}.hf-heading h2{font-size:23px}.hf-heading p{font-size:13px}.hf-tiny-flower{font-size:46px}.hf-save{align-items:stretch;flex-direction:column}.hf-save>div{width:100%}.hf-save button{flex:1}.hf-greeting-card{padding:13px;gap:9px}.hf-greeting-card>span{display:none}.hf-mood-choices button{font-size:11px}.hf-stamp-list{gap:4px}.hf-stamp{font-size:10px}.hf-stamp>span:first-child{font-size:25px}.hf-tracks button{min-height:44px}}@media(prefers-reduced-motion:reduce){.hf-vinyl.is-playing,.hf-equalizer.is-playing{animation:none}.hf-button{transition:none}}
.hf-discard{margin-top:12px;border:1px solid #e5c8b6;background:#fff7ec;padding:14px;border-radius:14px;font-size:13px}.hf-discard button{margin-inline-end:7px}.hf-quiz-result.is-won:before{content:'✦ ';color:#d7a46e}.hf-quiz:has(.is-won){background:radial-gradient(ellipse at 100% 0,#ffecc6,#fffbf4 65%)}

.hf-volume>span{display:block;position:relative;flex-shrink:0;width:22px;height:22px;font-size:0;line-height:1}.hf-volume>span:before{content:'';position:absolute;left:0;top:6px;width:10px;height:11px;background:#8ba29b;clip-path:polygon(0 28%,35% 28%,100% 0,100% 100%,35% 72%,0 72%)}.hf-volume>span:after{content:'';position:absolute;right:2px;top:4px;width:7px;height:14px;border:2px solid #8ba29b;border-left:0;border-radius:0 12px 12px 0}.hf-stamp:disabled{opacity:.85}