:root{--color-bg-base:#f3f5f1;--color-text-primary:#111512;--color-text-secondary:#5d6474;--color-accent:#111512;--color-accent-hover:#171b18;--color-lime:#b7f34a;--color-blue:#3972e6;--color-warning:#e6a23c;--color-danger:#d84a4a;--color-border:#0000000f;--color-border-light:#fff9;--color-glass-bg:#ffffffa6;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-serif:"Playfair Display", Georgia, serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%;font-family:var(--font-sans);color:var(--color-text-primary);background-color:var(--color-bg-base);position:relative;overflow-x:clip}body{min-height:100dvh}.bg-glow{filter:blur(130px);z-index:-1;opacity:.55;pointer-events:none;mix-blend-mode:multiply;border-radius:50%;position:fixed}.bg-glow-1{background:radial-gradient(circle,#ffdeb999 0%,#fff0 70%);width:600px;height:600px;animation:25s ease-in-out infinite alternate float-glow-1;top:-150px;left:-100px}.bg-glow-2{background:radial-gradient(circle,#c8e1ffb3 0%,#fff0 70%);width:700px;height:700px;animation:30s ease-in-out infinite alternate float-glow-2;bottom:-200px;right:-100px}.bg-glow-3{background:radial-gradient(circle,#ffd7e680 0%,#fff0 70%);width:500px;height:500px;animation:28s ease-in-out infinite alternate float-glow-3;top:25%;right:20%}@keyframes float-glow-1{0%{transform:translate(0)scale(1)}to{transform:translate(60px,40px)scale(1.1)}}@keyframes float-glow-2{0%{transform:translate(0)scale(1)}to{transform:translate(-80px,-50px)scale(1.15)}}@keyframes float-glow-3{0%{transform:translate(0)scale(1)}to{transform:translate(40px,-60px)scale(.9)}}.app-container{z-index:1;flex-direction:column;justify-content:flex-start;max-width:1320px;min-height:100vh;margin:0 auto;padding:40px 24px;display:flex;position:relative}.app-header{justify-content:space-between;align-items:center;margin-bottom:48px;display:flex}.brand-tag{text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-secondary);margin-bottom:6px;font-size:.75rem;font-weight:600;display:inline-block}.brand-title{font-family:var(--font-serif);letter-spacing:-.01em;color:var(--color-text-primary);font-size:2.2rem;font-weight:600;line-height:1.1}.header-status{background:var(--color-glass-bg);border:1px solid var(--color-border-light);border-radius:100px;align-items:center;gap:8px;padding:8px 16px;display:flex;box-shadow:0 4px 12px #00000005}.status-indicator{background-color:#10b981;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 10px #10b98199}.status-text{color:var(--color-text-secondary);font-size:.8rem;font-weight:500}@keyframes pulse{0%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}to{opacity:.5;transform:scale(.95)}}.app-main{grid-template-columns:minmax(560px,1fr) 360px;align-items:center;gap:48px;min-width:0;margin-bottom:0;display:grid}@media (max-width:968px){.app-main{grid-template-columns:minmax(0,1fr);gap:48px;width:100%}.display-card{max-width:100%}.app-header{flex-direction:column;align-items:flex-start;gap:16px}}.display-card-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;min-width:0;display:flex}.display-card{aspect-ratio:1;-webkit-backdrop-filter:blur(22px)saturate(145%);isolation:isolate;background:#ffffff4d;border:1px solid #ffffffad;border-radius:32px;width:100%;max-width:560px;padding:12px;transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 32px 72px #12131614,0 12px 30px #12131609,inset 0 1px #ffffffb8}.display-card:hover{transform:translateY(-8px)scale(1.01);box-shadow:0 42px 86px #1213161c,0 16px 34px #1213160b,inset 0 1px #ffffffd1}.motion-toggle{z-index:4;color:var(--color-text-primary);-webkit-backdrop-filter:blur(12px);font:600 .72rem/1 var(--font-sans);cursor:pointer;background:#ffffffdb;border:1px solid #11151214;border-radius:999px;align-items:center;gap:7px;padding:8px 12px;transition:color .18s,background .18s,transform .18s;display:inline-flex;position:absolute;top:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 22px #11151214}.motion-toggle[hidden]{display:none}.motion-toggle:active{transform:translate(-50%)scale(.97)}.motion-toggle-dot{background:#a4aaa5;border-radius:50%;width:7px;height:7px;transition:background .18s,box-shadow .18s}.motion-toggle.is-active{color:#f1f4ef;background:#111512}.motion-toggle.is-active .motion-toggle-dot{background:var(--color-lime);box-shadow:0 0 10px #b7f34ab3}#canvas-container{--shadow-alpha:.18;--shadow-blur:14px;background-color:#0000;border-radius:20px;width:100%;height:100%;position:relative;overflow:hidden}#canvas-container:before{content:"";width:calc(46% + var(--shadow-blur) * 2);height:calc(8% + var(--shadow-blur));background:radial-gradient(ellipse, rgb(43 49 63/var(--shadow-alpha)) 0%, #2b313f12 42%, transparent 72%);transform-origin:50%;pointer-events:none;border-radius:50%;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s;position:absolute;bottom:11%;left:50%;transform:translate(-50%)scale(1)}canvas{z-index:1;border-radius:20px;width:100%;height:100%;display:block;position:relative}.display-card:hover #canvas-container:before{opacity:.72;transform:translate(-50%,7px)scale(1.08)}.card-glare{pointer-events:none;z-index:2;background:linear-gradient(135deg,#fff3 0%,#ffffff0a 38%,#0000 62%);border-radius:20px;position:absolute;inset:12px}@media (max-width:968px),(hover:none) and (pointer:coarse){.card-glare{background:linear-gradient(135deg,#ffffff3d 0%,#ffffff0d 38%,#0000 62%),radial-gradient(circle at 78% 18%,#ffffff1f,#0000 36%);border-radius:32px;inset:0}}.display-card-caption{flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%;margin-top:16px;font-size:.82rem;display:flex}.caption-index{color:var(--color-text-primary);text-transform:uppercase;font-weight:700}.caption-name{color:var(--color-text-secondary)}.control-panel{background:var(--color-glass-bg);-webkit-backdrop-filter:blur(24px)saturate(180%);border:1px solid var(--color-border-light);overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#14161a38 transparent;border-radius:28px;flex-direction:column;gap:16px;width:100%;min-width:0;max-height:min(680px,100dvh - 260px);padding:24px;display:flex;overflow-y:auto;box-shadow:0 24px 50px #00000005,0 4px 12px #00000003,inset 0 0 0 1px #ffffff80}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:0 0}.control-panel::-webkit-scrollbar-thumb{background:#14161a2e;border-radius:999px}.control-panel::-webkit-scrollbar-thumb:hover{background:#14161a4d}.panel-section{flex-direction:column;gap:14px;display:flex}.panel-section-title{text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-secondary);font-size:.8rem;font-weight:700}.specimen-desc{color:var(--color-text-secondary);font-size:.88rem;line-height:1.6}.specimen-desc em{font-family:var(--font-serif);font-weight:400}.panel-separator{background-color:var(--color-border);height:1px}.control-group{flex-direction:column;gap:8px;margin-bottom:4px;display:flex}.control-header{justify-content:space-between;align-items:center;display:flex}.control-header label{color:var(--color-text-primary);font-size:.85rem;font-weight:600}.control-value{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;background:#00000008;border-radius:4px;padding:2px 6px;font-size:.8rem;font-weight:700}.control-label-static{color:var(--color-text-primary);font-size:.85rem;font-weight:600}.toggle-control{color:var(--color-text-primary);cursor:pointer;justify-content:space-between;align-items:center;gap:16px;font-size:.85rem;font-weight:600;display:flex}.toggle-control input{width:18px;height:18px;accent-color:var(--color-accent);cursor:pointer}.premium-slider{appearance:none;background:#0000000f;border-radius:2px;outline:none;width:100%;height:4px;transition:background .3s}.premium-slider::-webkit-slider-thumb{appearance:none;background:var(--color-accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 2px 6px #00000026}.premium-slider::-webkit-slider-thumb:hover{background:var(--color-accent-hover);transform:scale(1.25)}.premium-slider::-moz-range-thumb{background:var(--color-accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;box-shadow:0 2px 6px #00000026}.premium-slider::-moz-range-thumb:hover{transform:scale(1.25)}.color-chips{gap:12px;margin-top:4px;display:flex}.color-chip{background:var(--chip-bg);cursor:pointer;border:2px solid #fff;border-radius:50%;width:32px;height:32px;transition:transform .2s,box-shadow .2s;position:relative;box-shadow:0 0 0 1px #0000001a,0 2px 6px #0000000d}.color-chip:hover{transform:scale(1.15)}.color-chip.active{box-shadow:0 0 0 2px var(--color-accent), 0 2px 6px #0000001a;transform:scale(1.1)}.panel-footer{gap:12px;display:flex}.premium-button{font-family:var(--font-sans);background-color:var(--color-accent);color:#fff;cursor:pointer;text-align:center;border:none;border-radius:12px;outline:none;flex:1;padding:12px 16px;font-size:.85rem;font-weight:600;transition:background-color .2s,transform .1s,border-color .2s;box-shadow:0 4px 12px #0000000d}.premium-button:hover{background-color:var(--color-accent-hover)}.premium-button:active{transform:scale(.98)}.premium-button.secondary{color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:none;background-color:#0000}.premium-button.secondary:hover{background-color:#00000008;border-color:#00000026}@media (max-height:850px){.app-container{padding:24px}.app-header{margin-bottom:24px}.display-card{max-width:500px}.control-panel{max-height:68vh}}@media (max-height:720px){.app-container{padding:16px 24px}.app-header{margin-bottom:16px}.brand-title{font-size:1.8rem}.display-card{max-width:420px}.control-panel{gap:12px;max-height:64vh}.specimen-desc{font-size:.82rem;line-height:1.4}.panel-section{gap:10px}}@media (max-width:968px){.display-card-wrapper{width:min(100%,560px);box-shadow:none;background-color:#0000;border:0;border-radius:32px;justify-self:center;padding:12px 12px 16px;overflow:hidden}.display-card{background:#ffffff4d;border:1px solid #ffffffad;border-radius:32px;padding:12px;box-shadow:0 26px 60px #12131612,inset 0 1px #ffffffb8}.display-card:hover{transform:none;box-shadow:0 26px 60px #12131612,inset 0 1px #ffffffb8}.display-card-caption{margin-top:12px;padding:0 4px}.control-panel{justify-self:center;width:min(100%,560px);max-height:min(620px,68vh)}}.app-footer{text-align:center;color:var(--color-text-secondary);border-top:1px solid var(--color-border);margin-top:auto;padding-top:24px;font-size:.78rem}@media (max-width:968px){.app-footer{margin-top:48px}}.navigator{justify-content:center;align-items:center;gap:20px;display:flex}.nav-arrow{border:1px solid var(--color-border);width:40px;height:40px;color:var(--color-text-primary);cursor:pointer;background:#fffc;border-radius:50%;outline:none;justify-content:center;align-items:center;transition:background .2s,transform .15s,box-shadow .2s,border-color .2s;display:flex;box-shadow:0 2px 8px #0000000a}.nav-arrow:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent);transform:scale(1.08);box-shadow:0 4px 14px #0000001a}.nav-arrow:active{transform:scale(.96)}.nav-arrow:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.navigator-index{color:var(--color-text-primary);font-variant-numeric:tabular-nums;text-align:center;letter-spacing:.02em;min-width:70px;font-size:1rem;font-weight:700}.json-display{color:var(--color-text-primary);white-space:pre;-webkit-user-select:all;user-select:all;background:#00000008;border-radius:10px;margin:0;padding:12px 14px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;line-height:1.5;overflow-x:auto}