@font-face{font-family:FlowerBrush;src:url("assets/brush.ttf") format("truetype");font-display:swap}
@font-face{font-family:FlowerSerif;src:url("assets/serif.ttf") format("truetype");font-display:swap;font-weight:400}
:root{color-scheme:light;--ink:#404d46;--muted:#718078;--hair:#4c665525}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e5eae5}
body{font-family:FlowerSerif,"Songti SC","SimSun",serif;color:var(--ink)}
#stage{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
button:hover,a:hover{color:#984f65}
button:focus-visible,a:focus-visible,input:focus-visible{outline:1px solid #798779;outline-offset:5px}
a{color:inherit;text-decoration:none}
header{position:absolute;left:46px;right:46px;top:29px;display:flex;align-items:center;gap:24px;pointer-events:none}
header a{pointer-events:auto}
.brand{font-family:FlowerBrush,serif;font-size:39px;letter-spacing:6px}
.tagline{font-size:11px;letter-spacing:3px;color:#62736a}
.chapter{margin-left:auto;font-size:11px;letter-spacing:4px;color:#7d8b80}
.inscription{position:absolute;left:9%;top:24%;pointer-events:none;opacity:.8}
h1{margin:0;font-family:FlowerBrush,serif;font-size:57px;line-height:1;font-weight:400}
.inscription p{writing-mode:vertical-rl;font-size:11px;letter-spacing:6px;margin:22px 0 0 19px}
.seal{display:block;width:20px;font-size:9px;line-height:1.2;text-align:center;writing-mode:vertical-rl;border:1px solid #975d5c;color:#975d5c;letter-spacing:2px;padding:5px 3px;margin:18px 0 0 16px;opacity:.75}
.interaction-hint{position:absolute;right:43px;top:45%;writing-mode:vertical-rl;font-size:10px;letter-spacing:5px;line-height:2;color:#79887c;pointer-events:none}
.interaction-hint span{margin:17px 0}
footer{position:absolute;bottom:20px;left:46px;right:46px}
.controls{display:grid;grid-template-columns:1fr 290px 1fr;align-items:center;gap:20px;border-top:1px solid var(--hair);padding-top:14px}
.inks{display:flex;align-items:flex-start;gap:11px}
.ink{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;min-width:30px;font-size:9px;letter-spacing:1px;color:#65756a}
.ink i{display:block;width:20px;height:20px;border-radius:47% 53% 48% 52%;background:radial-gradient(at 30% 28%,#ffffff25,transparent 65%),var(--ink);outline:1px solid transparent;outline-offset:5px;margin:6px}
.ink.selected i{outline-color:#758376}
.ink:not(.selected) span{opacity:.55}
#flower-form{display:flex;border-bottom:1px solid #6c806855;margin:0;min-width:0}
.flower-picker{position:relative;display:flex;flex:1;min-width:0;align-items:center}
.flower-picker.is-concealed{visibility:hidden}
#flower-name{background:transparent;border:0;min-width:0;width:100%;font-size:19px;letter-spacing:4px;text-align:center;padding:10px 0 10px 5px;outline:none;border-radius:0}
#flower-name:focus-visible{box-shadow:inset 0 -1px #71816b}
#flower-name::placeholder{font-size:12px;letter-spacing:1px;color:#7b897e}
.flower-options-toggle{display:grid;place-items:center;flex-shrink:0;width:32px;min-height:44px;padding:0;color:#758575}
.flower-options-toggle svg{transition:transform .18s ease}
.flower-options-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.flower-submit{flex-shrink:0;font-size:12px;letter-spacing:3px;padding:10px 3px 10px 15px}
.flower-submit span{margin-left:8px;font-family:Arial,sans-serif}
.flower-menu{position:absolute;z-index:4;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:272px;max-width:calc(100vw - 40px);padding:12px;background:#edf1eaf7;border:1px solid #6f84633d;box-shadow:0 8px 35px #34493412;backdrop-filter:blur(18px)}
.flower-menu[hidden]{display:none}
.flower-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 9px 10px;border-bottom:1px solid var(--hair);font-size:10px;letter-spacing:1px;color:#778575}
#flower-show-all{padding:5px 0 5px 10px;font-size:10px;letter-spacing:1px;color:#687e65}
#flower-options{max-height:min(308px,45vh);overflow-y:auto;overscroll-behavior:contain;padding-top:5px;scrollbar-width:thin;scrollbar-color:#9ca998 transparent}
.flower-option{position:relative;isolation:isolate;overflow:clip;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;text-align:left;font-size:14px;letter-spacing:3px;padding:9px 12px;transition:color .25s ease}
.flower-option::before,.flower-option::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:50%;left:-8px;width:210px;height:50px;max-width:100%;background:url("assets/menu-ink-wash.svg") center/100% 100% no-repeat;opacity:0;transform-origin:42px 50%;transform:translateY(-50%) scale(.28,.38);transition:opacity .4s ease,transform .7s ease}
.flower-option::after{left:7px;width:170px;height:44px;transform-origin:58px 50%;transform:translateY(-50%) scale(.2,.3) rotate(11deg);filter:blur(.6px)}
.flower-option:nth-child(even)::before{background-position:4px 0}
.flower-option:nth-child(3n)::after{background-position:-9px 3px}
.flower-option small{font-size:9px;letter-spacing:1px;color:#87947f}
.flower-option:hover,.flower-option[aria-selected="true"]{color:#38553f}
.flower-option[aria-selected="true"]::before{opacity:.7;transform:translateY(-50%) scale(.9,.84);transition:opacity .65s ease,transform 1.6s cubic-bezier(.18,.55,.3,1)}
.flower-option[aria-selected="true"]::after{opacity:.28;transform:translateY(-50%) scale(.85,.9) rotate(6deg);transition:opacity 1s ease,transform 2s cubic-bezier(.18,.55,.3,1)}
.flower-option:hover::before{opacity:1;transform:translateY(-50%) scale(1,.96);transition:opacity .7s ease,transform 1.8s cubic-bezier(.18,.55,.3,1)}
.flower-option:hover::after{opacity:.5;transform:translateY(-50%) scale(1.04,1.05) rotate(-3deg);transition:opacity 1.2s ease .08s,transform 2.3s cubic-bezier(.18,.55,.3,1) .08s}
.flower-option:active::before{opacity:1;transform:translateY(-50%) scale(1.03,1);transition-duration:.2s}
.flower-option:active::after{opacity:.7;transform:translateY(-50%) scale(1.07,1.08) rotate(-3deg);transition-duration:.2s}
.flower-empty{margin:16px 9px;font-size:11px;line-height:1.8;letter-spacing:1px;color:#7b897d}
.actions{display:flex;justify-content:flex-end;gap:18px}
.actions button{font-size:11px;letter-spacing:1px;white-space:nowrap;padding:12px 0}
.footline{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-top:17px;font-size:9px;color:#738276;letter-spacing:1px}
.source{font-size:8px;opacity:.72}
#toggle-name{justify-self:center;font-size:inherit;letter-spacing:2px;padding:4px 12px}
#save{font-size:10px;letter-spacing:2px;justify-self:end;padding:4px 0}
#error{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);max-width:400px;background:#eff2ebec;padding:26px;font-size:14px;line-height:1.8}
.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}
.music{position:relative;display:flex;align-items:center;pointer-events:auto;z-index:3;font-size:11px;letter-spacing:2px}
.music-toggle{display:flex;align-items:center;gap:9px;min-height:40px;padding:6px 4px 6px 10px;font-size:11px;letter-spacing:2px;color:#62766a}
.music-options{min-width:30px;min-height:40px;padding:0 3px;font-family:Arial,sans-serif;font-size:14px;color:#829084}
.music-wave{display:flex;align-items:center;gap:3px;height:18px;width:15px}
.music-wave i{width:1px;height:5px;background:currentColor;opacity:.65}
.music-wave i:nth-child(2){height:12px}.music-wave i:nth-child(3){height:8px}
.is-playing .music-wave i{animation:music-breathe 1.9s ease-in-out infinite alternate}
.is-playing .music-wave i:nth-child(2){animation-delay:-1.2s}.is-playing .music-wave i:nth-child(3){animation-delay:-.6s}
@keyframes music-breathe{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.music-panel{position:absolute;top:49px;right:0;width:280px;max-width:calc(100vw - 40px);padding:22px;background:#eef1eaf5;border:1px solid #6f846330;box-shadow:0 10px 40px #3449340a;backdrop-filter:blur(18px);letter-spacing:1px}
.music-panel[hidden]{display:none}
.music-heading{display:flex;align-items:center;justify-content:space-between;font-size:15px;letter-spacing:3px;margin-bottom:15px}
.music-mode{font-size:8px;letter-spacing:1px;color:#7a887d}
.music-tracks{display:grid;gap:4px}
.music-tracks button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:10px;font-size:12px;text-align:left;border-left:1px solid transparent}
.music-tracks button[aria-pressed="true"]{border-left-color:#78866f;background:#7082630c;color:#435d49}
.music-tracks small{font-size:9px;letter-spacing:1px;color:#768576}
.music-volume{display:flex;align-items:center;gap:12px;margin:18px 0 0;font-size:10px;color:#72816f}
#music-volume{flex:1;width:90px;min-width:0;height:28px;margin:0;padding:0;accent-color:#738268;cursor:pointer}
#music-level{width:32px;text-align:right;font-family:Arial,sans-serif;font-size:10px;letter-spacing:0}
#music-status{font-size:9px;line-height:1.8;min-height:32px;margin:12px 0;color:#778574;letter-spacing:.5px}
.music-credit{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--hair);font-size:8px;color:#7b897b;letter-spacing:.3px}
.music-credit a{width:fit-content;text-decoration:underline;text-decoration-color:#7b897b55;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.is-playing .music-wave i{animation:none}.flower-options-toggle svg,.flower-option,.flower-option::before,.flower-option::after,.flower-option:is(:hover,:active,[aria-selected="true"])::before,.flower-option:is(:hover,:active,[aria-selected="true"])::after{transition:none}}
@media(max-width:600px){header{gap:10px}.chapter{letter-spacing:2px}.tagline{display:none}}
@media(max-width:800px){header{left:25px;right:25px;top:22px}.brand{font-size:34px}.tagline{font-size:9px;letter-spacing:1px}.inscription{left:6%;top:21%}.inscription h1{font-size:45px}.interaction-hint{right:18px}footer{left:25px;right:25px;bottom:17px}.controls{grid-template-columns:1fr 250px;gap:10px 20px}.actions{grid-column:1/-1;justify-content:center;gap:30px}.inks{gap:14px}.footline{margin-top:6px}.source{font-size:7px}}
@media(max-width:480px){header{left:22px;right:22px}.brand{font-size:30px}.tagline{display:none}.chapter{font-size:10px}.inscription{left:7%;top:19%}.inscription h1{font-size:37px}.inscription p{font-size:10px;letter-spacing:5px;margin:17px 0 0 12px}.seal{margin-left:9px}.interaction-hint{top:81px;left:24px;right:auto;writing-mode:horizontal-tb;font-size:8px;letter-spacing:3px}.interaction-hint span{margin:0 7px}footer{left:20px;right:20px;bottom:14px}.controls{grid-template-columns:1fr 190px;gap:8px 12px}.inks{gap:5px}.ink{min-width:26px;font-size:8px;gap:7px}.ink i{width:17px;height:17px;margin:5px}.ink:not(.selected) span{opacity:.75}#flower-name{font-size:16px;letter-spacing:2px}.flower-options-toggle{width:28px}.flower-submit{font-size:11px;letter-spacing:1px;padding:10px 0 10px 9px}.flower-submit span{margin-left:3px}.actions{gap:33px}.actions button{font-size:10px}.footline{grid-template-columns:1fr auto;font-size:8px}.source{display:none}#status{text-align:left}#save{font-size:9px}}
@media(max-width:480px){.flower-menu{left:auto;right:0;transform:none}}
@media(max-width:360px){.controls{grid-template-columns:1fr}.inks{justify-content:center}#flower-form{grid-row:1;width:100%;max-width:290px;justify-self:center}.flower-menu{left:0;right:auto;transform:none;width:100%}}