.playground-page{padding:clamp(3rem,7vw,6.5rem) 0 clamp(5rem,9vw,8rem)}.playground-intro{margin-bottom:clamp(2rem,5vw,4rem)}.back-link{min-height:44px;color:var(--color-text-secondary);transition:color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);align-items:center;gap:.55rem;margin-bottom:clamp(2.5rem,6vw,5rem);text-decoration:none;display:inline-flex}.back-link:hover{color:var(--color-text-primary);transform:translate(-2px)}.eyebrow,.section-kicker{color:var(--color-accent);font-size:var(--font-size-xs);letter-spacing:.16em;margin:0;font-weight:680}.playground-intro h1{max-width:12ch;letter-spacing:var(--letter-spacing-tight);margin:.7rem 0 1.15rem;font-size:clamp(2.8rem,7vw,6.75rem);font-weight:520;line-height:.94}.playground-intro__lead{max-width:42rem;color:var(--color-text-secondary);margin:0;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.7}.glass-lab{--light-x:50%;--light-y:24%;--glass-blur:24px;--glass-opacity:36%;--glass-saturation:145%;--glass-highlight:52%;--glass-radius:28px;grid-template-columns:minmax(0,1.55fr) minmax(19rem,.65fr);align-items:start;gap:clamp(1rem,2.5vw,2rem);display:grid}.preview-shell,.control-panel{border:1px solid var(--material-content-border);background:var(--material-content-bg);box-shadow:var(--shadow-content)}.preview-shell{border-radius:var(--radius-xl);overflow:hidden}.preview-heading{justify-content:space-between;align-items:center;gap:2rem;min-height:6.5rem;padding:1.35rem clamp(1.25rem,3vw,2rem);display:flex}.preview-heading h2,.control-panel h2{letter-spacing:-.025em;margin:.28rem 0 0;font-size:clamp(1.25rem,2vw,1.55rem);font-weight:580}.preview-heading>p{max-width:17rem;color:var(--color-text-tertiary);font-size:var(--font-size-sm);text-align:right;margin:0;line-height:1.45}.preview-scene{isolation:isolate;touch-action:pan-y;place-items:center;min-height:clamp(31rem,51vw,43rem);display:grid;position:relative;overflow:hidden}.preview-scene:after{z-index:-1;background:radial-gradient(circle at var(--light-x) var(--light-y), #e2f2ff47, transparent 34%), linear-gradient(180deg, #010a1c0a, #0106126b);content:"";pointer-events:none;transition:background-position var(--duration-fast) linear;position:absolute;inset:0}.preview-scene picture,.preview-scene img{z-index:-2;width:100%;height:100%;position:absolute;inset:0}.preview-scene img{object-fit:cover}.scene-orbit{z-index:-1;pointer-events:none;border:1px solid #d0e6ff47;border-radius:50%;position:absolute}.scene-orbit--one{width:24rem;height:24rem;top:-12rem;right:-5rem;box-shadow:0 0 4rem #75a9ff2e}.scene-orbit--two{width:18rem;height:18rem;bottom:-9rem;left:-4rem;box-shadow:0 0 4rem #ff9bda2e}.glass-sample{border:1px solid color-mix(in srgb, #fff var(--glass-highlight), transparent);border-radius:var(--glass-radius);background:rgb(18 34 64/var(--glass-opacity));color:#f8fbff;width:min(72%,31rem);min-height:22rem;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));transition:border-radius var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), backdrop-filter var(--duration-normal) var(--ease-standard);padding:clamp(1.25rem,3vw,2rem);position:relative;overflow:hidden;box-shadow:0 2rem 5rem #00081c66,inset 0 1px #ffffff47}.glass-sample:before{background:radial-gradient(circle at var(--light-x) var(--light-y), color-mix(in srgb, #fff var(--glass-highlight), transparent) 0, transparent 42%);content:"";opacity:.62;pointer-events:none;position:absolute;inset:0}.glass-sample__meta,.glass-sample__footer{color:#f0f6ffbd;letter-spacing:.11em;justify-content:space-between;gap:1rem;font-size:.68rem;font-weight:620;display:flex;position:relative}.glass-sample__content{align-items:center;gap:clamp(1rem,3vw,2rem);min-height:15rem;display:flex;position:relative}.glass-sample__mark{background:#ffffff1f;border:1px solid #ffffff4d;border-radius:50%;flex:none;place-items:center;width:3.5rem;height:3.5rem;font-size:1.45rem;display:grid}.glass-sample__content p{color:#ebf3ffb3;font-size:var(--font-size-sm);margin:0 0 .35rem}.glass-sample__content h3{letter-spacing:-.055em;margin:0;font-size:clamp(2rem,4vw,3.4rem);font-weight:470;line-height:.98}.glass-sample__meter{align-items:flex-end;gap:.2rem;display:flex}.glass-sample__meter i{background:currentColor;width:2px;height:.5rem;display:block}.glass-sample__meter i:nth-child(2){height:.8rem}.glass-sample__meter i:nth-child(3){height:.35rem}.control-panel{border-radius:var(--radius-xl);padding:clamp(1.25rem,3vw,1.75rem);position:sticky;top:6.5rem}.control-panel__heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem;display:flex}.icon-button,.copy-button,.preset-button{border:1px solid var(--material-content-border);min-height:44px;color:var(--color-text-primary);font:inherit;cursor:pointer}.icon-button{background:var(--material-clear-bg);border-radius:50%;place-items:center;width:44px;padding:0;display:grid}.preset-group{border:0;margin:0 0 1.6rem;padding:0}.preset-group legend{color:var(--color-text-tertiary);font-size:var(--font-size-xs);margin-bottom:.65rem}.preset-list{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.preset-button{border-radius:var(--radius-pill);font-size:var(--font-size-sm);background:0 0;padding:.55rem .35rem}.preset-button[aria-pressed=true]{border-color:color-mix(in srgb, var(--color-accent) 55%, transparent);background:var(--control-selected-bg);color:var(--color-accent-strong)}.range-control+.range-control{margin-top:1.12rem}.range-control__label{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.35rem;display:flex}.range-control__label label{font-size:var(--font-size-sm);font-weight:580}.range-control__label output{color:var(--color-accent-strong);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.range-control input{width:100%;min-height:24px;accent-color:var(--color-accent);cursor:pointer;margin:0}.range-control__hint{color:var(--color-text-tertiary);font-size:.7rem;line-height:1.35;display:block}.code-block{border:1px solid var(--material-content-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-bg-deep) 70%, transparent);margin-top:1.6rem;overflow:hidden}.code-block__header{border-bottom:1px solid var(--material-content-border);min-height:3rem;color:var(--color-text-tertiary);letter-spacing:.12em;justify-content:space-between;align-items:center;padding:0 .6rem 0 1rem;font-size:.68rem;display:flex}.copy-button{color:var(--color-text-secondary);font-size:var(--font-size-xs);letter-spacing:0;background:0 0;border-color:#0000;align-items:center;gap:.4rem;padding:0 .65rem;display:inline-flex}.icon-button:hover,.copy-button:hover,.preset-button:hover{background:var(--control-hover-bg)}.icon-button:focus-visible,.copy-button:focus-visible,.preset-button:focus-visible,.range-control input:focus-visible,.back-link:focus-visible,.code-block textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.code-block textarea{resize:vertical;width:100%;color:var(--color-text-secondary);background:0 0;border:0;padding:.9rem 1rem;font:.7rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;display:block}.copy-status{min-height:1rem;color:var(--color-accent-strong);margin:0;padding:0 1rem .7rem;font-size:.7rem}.no-script{border:1px solid var(--material-content-border);border-radius:var(--radius-md);color:var(--color-text-secondary);grid-column:1/-1;margin:0;padding:1rem}@media (width<=64rem){.glass-lab{grid-template-columns:minmax(0,1fr) minmax(18rem,.72fr)}.glass-sample{width:min(82%,29rem)}}@media (width<=48rem){.glass-lab{grid-template-columns:1fr}.control-panel{position:static}.preview-scene{min-height:32rem}}@media (width<=32rem){.playground-page{padding-top:2rem}.back-link{margin-bottom:2.5rem}.playground-intro h1{font-size:clamp(2.55rem,14vw,4rem)}.preview-heading{flex-direction:column;align-items:flex-start;gap:.65rem;min-height:7.5rem}.preview-heading>p{text-align:left}.preview-scene{min-height:28rem}.glass-sample{width:calc(100% - 2rem);min-height:20rem;padding:1.15rem}.glass-sample__content{flex-direction:column;justify-content:center;align-items:flex-start;min-height:13rem}.glass-sample__content h3{font-size:clamp(2rem,11vw,3rem)}}@media (height<=31rem) and (orientation:landscape){.playground-intro{margin-bottom:2rem}.back-link{margin-bottom:1.5rem}.preview-scene{min-height:25rem}}@media (prefers-reduced-motion:reduce){.preview-scene:after,.glass-sample{transition:none}}@media (prefers-reduced-transparency:reduce){.glass-sample{backdrop-filter:none;background:#122240f0}}@media (forced-colors:active){.preset-button[aria-pressed=true]{color:selecteditemtext;background:selecteditem}}