body{font-family:"Noto Serif SC",Georgia,serif;overflow:hidden;background:#000;color:#fff}#root{width:100vw;height:100vh}.app{width:100%;height:100%;position:relative}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0a0a0a);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s ease-out}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-title{font-size:4rem;margin-bottom:2rem;display:flex;gap:1rem;justify-content:center}.loading-title span{display:inline-block;background:linear-gradient(45deg,#d4af37,#f1c40f,#d4af37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:float 3s ease-in-out infinite}.loading-title span:nth-child(1){animation-delay:0s}.loading-title span:nth-child(2){animation-delay:.2s}.loading-title span:nth-child(3){animation-delay:.4s}.loading-title span:nth-child(4){animation-delay:.6s}.loading-title span:nth-child(5){animation-delay:.8s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.loading-bar{width:300px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin:0 auto 1rem}.loading-progress{height:100%;background:linear-gradient(90deg,#d4af37,#f1c40f);transition:width .3s ease;box-shadow:0 0 10px #d4af37}.loading-text{font-size:1.2rem;color:#d4af37;margin-bottom:.5rem;letter-spacing:2px}.loading-hint{font-size:.9rem;color:#888;font-style:italic}.ui-header{position:fixed;top:0;left:0;width:100%;padding:2rem;text-align:center;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);z-index:100;pointer-events:none}.ui-header h1{font-size:2.5rem;background:linear-gradient(45deg,#d4af37,#f1c40f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:8px}.ui-header p{font-size:1rem;color:#aaa;letter-spacing:2px}.back-button{position:fixed;top:1.5rem;right:1.5rem;width:52px;height:52px;border-radius:50%;background:#0c12248c;border:1px solid rgba(212,175,55,.45);color:#ffdca8;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:130;transition:transform .3s ease,background .3s ease,border-color .3s ease;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.back-button:hover{transform:translate(-4px);background:#d4af3740;border-color:#d4af37b3}.back-button svg{width:22px;height:22px}.settings-button{position:fixed;top:1.5rem;left:1.5rem;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;color:#f5f5f5;cursor:pointer;z-index:140;transition:transform .3s ease,background .3s ease,border-color .3s ease}.settings-button:hover,.settings-button.active{background:#ffffff1f;border-color:#ffffff73;transform:translateY(-2px)}.settings-button svg{pointer-events:none}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#060c1c8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:120}.settings-drawer{position:fixed;top:0;left:0;height:100%;width:min(360px,82vw);padding:1.75rem 1.5rem 1.5rem;background:linear-gradient(140deg,#0a1226eb,#10182ce0);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border-right:1px solid rgba(255,255,255,.08);transform:translate(-110%);transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:150;color:#f5f7ff;overflow-y:auto}.settings-drawer.open{transform:translate(0)}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.settings-tabs{display:flex;gap:.5rem}.settings-tabs button{border:1px solid transparent;background:#ffffff14;color:#ffffffb3;padding:.45rem 1.1rem;border-radius:999px;font-size:.9rem;letter-spacing:2px;transition:all .3s ease;cursor:pointer}.settings-tabs button.active{background:#d4af3738;border-color:#d4af3780;color:#ffe7ad;box-shadow:0 0 18px #d4af3759}.settings-tabs button:not(.active):hover{background:#ffffff24;color:#fff}.settings-close{border:none;background:#ffffff14;border-radius:10px;padding:.35rem;color:#ffffffb3;cursor:pointer;transition:background .3s ease,color .3s ease}.settings-close:hover{background:#ffffff2e;color:#fff}.settings-content{display:flex;flex-direction:column;gap:1.4rem}.settings-group{padding:1rem 1.2rem;border-radius:18px;background:#0b1326b8;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 20px #0f1a2d66}.settings-group h3{font-size:1rem;letter-spacing:4px;margin-bottom:.75rem;color:#ffe3ad;font-weight:600}.setting-row{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.setting-row.toggle{flex-direction:row;align-items:center;justify-content:space-between;font-size:.95rem}.setting-label{display:flex;justify-content:space-between;font-size:.88rem;color:#ffffffbf;letter-spacing:1px}.setting-value{color:#ffdca8;font-feature-settings:"tnum"}.setting-row input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ffffff26;border-radius:999px;outline:none}.setting-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#ffdca8;border:2px solid rgba(12,18,36,.9);box-shadow:0 0 12px #d4af3799;cursor:pointer}.setting-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#ffdca8;border:2px solid rgba(12,18,36,.9);box-shadow:0 0 12px #d4af3799;cursor:pointer}.toggle-switch{position:relative;width:50px;height:26px;background:#fff3;border-radius:999px;transition:background .3s ease}.toggle-switch input{display:none}.toggle-switch .toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 4px 12px #0000004d;transition:transform .3s ease}.toggle-switch.on{background:#d4af378c}.toggle-switch.on .toggle-thumb{transform:translate(24px)}.settings-footer{margin-top:1.25rem;display:flex;justify-content:flex-end}.settings-footer .ghost{border:1px solid rgba(255,255,255,.25);background:transparent;color:#f5f5f5;padding:.45rem 1.3rem;border-radius:999px;letter-spacing:2px;cursor:pointer;transition:background .3s ease,border-color .3s ease}.settings-footer .ghost:hover{background:#ffffff2e;border-color:#fff6}.settings-help{font-size:.92rem;line-height:1.6;color:#ffffffbf}.settings-help ul{margin:1rem 0;padding-left:1.2rem}.settings-help li{margin-bottom:.5rem}.help-note{margin-top:.75rem;font-size:.85rem;color:#ffffff8c;letter-spacing:1px}kbd{background:#d4af3733;border:1px solid #d4af37;border-radius:5px;padding:.3rem .6rem;font-family:monospace;font-size:.85rem;color:#d4af37;min-width:80px;text-align:center;display:inline-block}.frame-title-float{background:#000000d9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:1.2rem 2rem;border-radius:12px;border:1px solid #d4af37;box-shadow:0 8px 32px #d4af374d;text-align:center;min-width:220px;animation:floatIn .4s cubic-bezier(.16,1,.3,1)}.frame-title-float h3{font-size:1.6rem;color:#d4af37;margin-bottom:.6rem;letter-spacing:3px;font-weight:600;text-shadow:0 0 20px rgba(212,175,55,.5)}.frame-title-float p{font-size:.95rem;color:#c9d1d9;letter-spacing:1px;opacity:.9}@keyframes floatIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.loading-title{font-size:2.5rem;gap:.5rem}.settings-button{top:1rem;left:1rem;width:50px;height:50px}.back-button{top:1rem;right:1rem;width:48px;height:48px}.settings-drawer{width:min(90vw,320px);padding:1.3rem 1.1rem}.settings-tabs button{padding:.4rem .9rem;font-size:.85rem}}canvas{outline:none;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#d4af37;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#f1c40f}.poem-cloud-label{background:#0a1128f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:1.5rem 2rem;border-radius:16px;border:2px solid rgba(212,175,55,.6);box-shadow:0 8px 32px #0009,0 0 40px #d4af374d,inset 0 0 20px #d4af371a;animation:cloudLabelFloat .5s cubic-bezier(.16,1,.3,1);pointer-events:none;min-width:200px;text-align:center}.poem-cloud-title{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#ffd6a5,#d4af37,#ffd6a5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:3px;text-shadow:0 0 30px rgba(212,175,55,.5)}.poem-cloud-category{font-size:.95rem;color:#a0c4ff;letter-spacing:2px;margin-bottom:.8rem;opacity:.9}.poem-cloud-hint{font-size:.85rem;color:#c9d1d9;letter-spacing:1px;opacity:.7;font-style:italic;animation:pulseGlow 2s ease-in-out infinite}@keyframes cloudLabelFloat{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseGlow{0%,to{opacity:.5}50%{opacity:1}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
