:root{--bg-color:#020610;--text-color:#e0f2f1;--primary-glow:#0fa;--secondary-glow:#00b8ff;--panel-bg:#02061099;--panel-border:#0fa3}*{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);width:100vw;height:100vh;margin:0;padding:0;font-family:Outfit,sans-serif;overflow:hidden}#root{width:100%;height:100%}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.title-overlay{z-index:10;pointer-events:none;text-align:right;position:absolute;top:30px;right:40px}.title-overlay h1{letter-spacing:2px;color:#fff;text-shadow:0 0 10px #00ffaa4d;margin:0;font-size:2rem;font-weight:300}.title-overlay h1 span{background:-webkit-linear-gradient(0deg, var(--primary-glow), var(--secondary-glow));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:600}.subtitle{margin-top:15px;font-size:1rem;line-height:1.5}.rule-text{color:#fffc;background:-webkit-linear-gradient(0deg, var(--primary-glow), var(--secondary-glow));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:400}.bottom-text{color:#ffffff80;margin-top:8px;font-size:.9rem;display:inline-block}.wiki-link{color:#fff6;pointer-events:auto;margin-top:4px;font-size:.8rem;text-decoration:underline;transition:color .2s;display:inline-block}.wiki-link:hover{color:#fffc}@media (width<=768px){.title-overlay{top:15px;right:15px}.title-overlay h1{font-size:1.5rem}.subtitle{font-size:.8rem}}.ui-overlay{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:30px;gap:12px;padding:16px 24px;transition:box-shadow .3s;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000080,0 0 20px #00ffaa1a}@media (width<=768px){.ui-overlay{box-sizing:border-box;border-radius:20px;flex-direction:column;width:90vw;padding:15px;bottom:15px}}.seed-input{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;outline:none;width:200px;padding:12px 20px;font-family:Outfit,sans-serif;font-size:1.1rem;transition:all .3s}@media (width<=768px){.seed-input{box-sizing:border-box;width:100%}}.seed-input:focus{border-color:var(--primary-glow);background:#ffffff1a}.seed-input::placeholder{color:#fff6}.action-btn{border:1px solid var(--primary-glow);color:var(--primary-glow);cursor:pointer;text-transform:none;letter-spacing:1px;background:linear-gradient(135deg,#0fa3,#00b8ff33);border-radius:20px;padding:12px 24px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:inset 0 0 10px #00ffaa1a}.action-btn:hover{text-shadow:0 0 8px #0fac;background:linear-gradient(135deg,#0fa6,#00b8ff66);transform:translateY(-1px);box-shadow:0 0 20px #0fa6,inset 0 0 15px #00ffaa4d}.action-btn:active{transform:translateY(1px)}.action-btn.explore-active{color:#ff00b8;text-shadow:0 0 8px #ff00b8cc;background:linear-gradient(135deg,#fa06,#ff00b866);border-color:#ff00b8;box-shadow:0 0 20px #ff00b866,inset 0 0 15px #ff00b84d}.controls-overlay{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);color:#fff;border-radius:20px;flex-direction:column;gap:12px;width:220px;padding:20px;display:flex;position:absolute;bottom:40px;right:40px;box-shadow:0 8px 32px #00000080}@media (width<=768px){.controls-overlay{box-sizing:border-box;gap:8px;width:90vw;max-width:320px;padding:15px;bottom:220px;right:50%;transform:translate(50%)}}.controls-overlay button{color:inherit;cursor:pointer;text-transform:lowercase;background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:8px 16px;font-family:inherit;font-size:.95rem;font-weight:600;transition:all .2s}.controls-overlay button:hover{background:#fff3;transform:translateY(-1px)}.controls-overlay button:active{transform:translateY(1px)}.slider-container{flex-direction:column;gap:4px;font-size:.85rem;font-weight:500;display:flex}.slider-container label{text-transform:lowercase;color:#ffffffb3}.slider-container input[type=range]{width:100%;accent-color:var(--primary-glow)}.lowcase-select{color:#fff;text-transform:lowercase;background:#0003;border:1px solid #fff3;border-radius:8px;outline:none;padding:6px;font-family:inherit;font-size:.9rem}.plan-overlay{z-index:10;background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);color:#fff;border-radius:20px;flex-direction:column;gap:8px;width:240px;max-height:50vh;padding:20px;display:flex;position:absolute;top:30px;left:40px;box-shadow:0 8px 32px #00000080}@media (width<=768px){.plan-overlay{box-sizing:border-box;width:90vw;max-width:320px;top:100px;left:50%;transform:translate(-50%)}}.plan-title{color:var(--primary-glow);margin-bottom:5px;font-weight:700}.plan-stat{color:#fffc;font-size:.9rem}.step-list-mini{background:#0003;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;flex:1;gap:4px;padding:5px;display:flex;overflow-y:auto}.plan-step{cursor:pointer;border:1px solid #0000;border-radius:4px;padding:4px;font-family:monospace;font-size:.8rem}.plan-step:hover{background:#ffffff1a}.plan-step.hovered{border-color:var(--primary-glow);color:var(--primary-glow)}.app-container.light{color:#000;background-color:#fff}.app-container.light .ui-overlay,.app-container.light .controls-overlay,.app-container.light .plan-overlay{color:#000;background:#fffc;border-color:#0003;box-shadow:0 8px 32px #0000001a}.app-container.light .seed-input{color:#000;background:#0000000d;border-color:#0003}.app-container.light .seed-input::placeholder{color:#00000080}.app-container.light .title-overlay h1{text-shadow:none;color:#000}.app-container.light .title-overlay h1 span,.app-container.light .rule-text{background:-webkit-linear-gradient(#0064c8,#009650);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.app-container.light .bottom-text{color:#00000080}.app-container.light .controls-overlay button,.app-container.light .plan-overlay button{background:#0000000d;border-color:#0000001a}.app-container.light .controls-overlay button:hover,.app-container.light .plan-overlay button:hover{background:#0000001a}.app-container.light .slider-container label{color:#000000b3}.app-container.light .lowcase-select{color:#000;background:#0000000d;border-color:#0003}.app-container.light .step-list-mini{background:#0000000d;border-color:#0003}.canvas-tooltip{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;border-radius:8px;width:180px;padding:10px}.app-container.light .canvas-tooltip{color:#000;background:#fffc;border-color:#0003}.tooltip-header{border-bottom:1px solid #fff3;justify-content:space-between;margin-bottom:4px;padding-bottom:4px;font-weight:700;display:flex}.app-container.light .tooltip-header{border-bottom-color:#0003}.tooltip-row{justify-content:space-between;margin-bottom:2px;font-size:.8rem;display:flex}.tooltip-footer{opacity:.7;text-align:center;margin-top:6px;font-size:.7rem}
