:root{color:#edf8f8;background:#000;font-family:Inter,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden;background:#000;-webkit-font-smoothing:antialiased}button,select,input,progress{font:inherit}button{color:inherit}.experience{position:relative;width:100vw;height:100vh;height:100dvh;min-height:0;overflow:hidden;isolation:isolate;background:#000;cursor:crosshair}.pattern-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:block;width:100%;height:100%;background:#000}.title-block,.pattern-caption,.sound-panel,.pattern-picker,.interaction-note{transition:opacity .36s ease,transform .36s ease}.title-block{position:absolute;top:34px;left:38px;z-index:3;max-width:280px;pointer-events:none}.eyebrow,.subtitle,.hint,.interaction-note,.pattern-caption p{margin:0;font-size:9px;font-weight:500;line-height:1.5;letter-spacing:.2em;text-transform:uppercase}.eyebrow{margin-bottom:13px;color:#e0f9f96b}.title-block h1{margin:0;font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:clamp(28px,2.35vw,42px);font-weight:500;line-height:1;letter-spacing:.18em;text-shadow:0 0 24px rgba(170,228,236,.18)}.subtitle{margin-top:13px;color:#e0f9f98f;letter-spacing:.28em}.pattern-caption{position:absolute;right:38px;bottom:96px;z-index:3;display:flex;align-items:flex-start;gap:12px;width:160px;pointer-events:none}.pattern-caption>span{padding-top:1px;font-family:Times New Roman,serif;font-size:14px;color:#e0f9f961}.pattern-caption h2{margin:0 0 5px;font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:15px;font-weight:500;letter-spacing:.14em}.pattern-caption p{color:#e0f9f970;letter-spacing:.08em;text-transform:none}.sound-panel{position:absolute;top:34px;right:38px;z-index:4;width:260px;padding:15px;border:1px solid rgba(214,244,247,.14);background:#03090bb3;box-shadow:0 18px 60px #00000061;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);cursor:default}.sound-status{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}.sound-status span{overflow:hidden;color:#e0f9f9b3;font-size:10px;letter-spacing:.12em;text-overflow:ellipsis;white-space:nowrap}.sound-status strong{min-width:28px;font-family:Times New Roman,serif;font-size:21px;font-weight:400;text-align:right}.energy-meter{display:block;width:100%;height:2px;margin:0 0 15px;overflow:hidden;border:0;border-radius:0;background:#dcfafa1a;-webkit-appearance:none;-moz-appearance:none;appearance:none}.energy-meter::-webkit-progress-bar{background:#dcfafa1a}.energy-meter::-webkit-progress-value{background:#cdeff1;transition:width .1s linear}.energy-meter::-moz-progress-bar{background:#cdeff1}.device-field,.response-field{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 9px}.response-field{grid-template-columns:52px minmax(0,1fr) 24px;margin-bottom:11px}.device-field>span,.response-field>span,.response-field output{color:#e0f9f973;font-size:9px;letter-spacing:.09em;white-space:nowrap}.response-field output{text-align:right}.device-field select{width:100%;min-width:0;height:29px;padding:0 23px 0 8px;overflow:hidden;border:1px solid rgba(214,244,247,.14);border-radius:0;outline:0;background:#ffffff06;color:#e8fbfbd1;font-size:9px;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.device-field select:hover,.device-field select:focus-visible{border-color:#cff2f585}.device-field select:disabled{cursor:wait;opacity:.42}.device-field select option{background:#061014;color:#eaf8f8}.response-field input{width:100%;height:14px;margin:0;accent-color:#bfe8eb;cursor:pointer}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel-actions button{min-height:35px;padding:0 10px;border:1px solid rgba(214,244,247,.16);background:#ffffff06;font-size:10px;letter-spacing:.08em;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}.panel-actions button:hover,.panel-actions button:focus-visible,.panel-actions button.is-active{border-color:#d8f4f4;background:#d8f4f4;color:#061014;outline:none}.panel-actions button:disabled{cursor:wait;opacity:.48}.hint{margin-top:11px;color:#e0f9f957;letter-spacing:.03em;text-transform:none}.pattern-picker{position:absolute;z-index:4;left:50%;bottom:24px;display:flex;gap:6px;max-width:calc(100vw - 420px);padding:7px;overflow-x:auto;border:1px solid rgba(214,244,247,.13);background:#03090bad;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform:translate(-50%);scrollbar-width:none;cursor:default}.pattern-picker::-webkit-scrollbar{display:none}.pattern-picker button{position:relative;flex:0 0 42px;width:42px;height:42px;padding:0;overflow:hidden;border:1px solid transparent;background:#071014;cursor:pointer;opacity:.5;transition:opacity .18s ease,transform .18s ease,border-color .18s ease}.pattern-picker button:hover,.pattern-picker button:focus-visible,.pattern-picker button.is-selected{opacity:1;border-color:#daf6f8e6;transform:translateY(-2px);outline:none}.pattern-picker img{display:block;width:100%;height:100%;object-fit:cover}.pattern-picker span{position:absolute;right:2px;bottom:2px;display:grid;min-width:14px;min-height:14px;place-items:center;padding:0 2px;background:#000000c2;font-size:8px;letter-spacing:.04em}.interaction-note{position:absolute;right:39px;bottom:30px;z-index:3;color:#e0f9f957;writing-mode:vertical-rl;pointer-events:none}.controls-idle .title-block,.controls-idle .sound-panel,.controls-idle .pattern-picker,.controls-idle .interaction-note,.controls-idle .pattern-caption{opacity:0;pointer-events:none}.controls-idle .title-block{transform:translateY(-8px)}.controls-idle .sound-panel,.controls-idle .interaction-note,.controls-idle .pattern-caption{transform:translate(8px)}.controls-idle .pattern-picker{transform:translate(-50%,8px)}@media(max-width:900px){.title-block{top:22px;left:22px}.sound-panel{top:22px;right:22px;width:228px}.pattern-caption{display:none}.pattern-picker{max-width:calc(100vw - 80px)}}@media(max-width:620px){.title-block{top:16px;left:16px}.eyebrow,.subtitle{display:none}.title-block h1{font-size:23px}.sound-panel{top:14px;right:14px;width:188px;padding:11px}.sound-status strong{font-size:18px}.device-field,.response-field{grid-template-columns:1fr;gap:4px}.response-field{grid-template-columns:1fr 25px}.response-field>span{display:none}.panel-actions{grid-template-columns:1fr}.hint{display:none}.pattern-picker{bottom:14px;max-width:calc(100vw - 28px)}.pattern-picker button{flex-basis:38px;width:38px;height:38px}.interaction-note{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}