:root{font-family:Segoe UI,Yu Gothic UI,Noto Sans JP,sans-serif;color:#e9edf8;background:#0b1020;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 78% 12%,#19274b 0,transparent 32%),#0b1020}.page{width:min(1180px,calc(100% - 48px));margin:auto}.header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #29344e}.brand{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.23em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;color:#95eddb;border:1px solid #447d83;transform:rotate(45deg);font-size:19px}.brand-mark:first-letter{transform:rotate(-45deg)}.brand small{font-size:10px;color:#7e8ba5}.header-tag{font-size:10px;letter-spacing:.18em;color:#8290ab}.intro{padding:62px 0 34px;max-width:770px}.eyebrow{display:flex;align-items:center;gap:13px;font-size:11px;font-weight:700;letter-spacing:.23em;color:#85ddce}.eyebrow-line{width:28px;height:1px;background:#85ddce}h1{font-size:clamp(38px,5vw,68px);letter-spacing:-.055em;line-height:1.33;margin:15px 0 20px;font-weight:700}h1 em{font-style:normal;color:#83e7d3}.intro p{font-size:14px;line-height:1.95;color:#aeb8ca;max-width:610px;margin:0}.viewer-shell{position:relative;border:1px solid #394861;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#141e34,#0d1628);box-shadow:0 24px 70px #0005}.viewer-toolbar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;padding:22px 26px;color:#b2bfd2;font-size:10px;font-weight:700;letter-spacing:.15em;pointer-events:none}.viewer-toolbar span:first-child{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#78e2c5;box-shadow:0 0 11px #78e2c5}.viewer{height:min(58vw,620px);min-height:390px;position:relative}.viewer canvas{display:block;width:100%;height:100%;outline:none}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#b5c2d5;font-size:13px}.spinner{width:20px;height:20px;border-radius:50%;border:2px solid #52617d;border-top-color:#8ce7d3;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewer-hint{position:absolute;bottom:22px;right:26px;z-index:2;font-size:11px;color:#a8b7c8;pointer-events:none}.control-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:18px;padding:20px 24px;border:1px solid #2c3a54;border-radius:16px;background:#111a2c}.controls-main{display:flex;align-items:center;gap:18px;flex:1;min-width:0}.play-button{height:48px;width:48px;flex:none;border:0;border-radius:12px;color:#12242a;background:#8de8d5;font-size:20px;font-weight:700;cursor:pointer}.play-button:hover{background:#b0fae9}.timeline-wrap{flex:1;min-width:0}.timeline-top{display:flex;justify-content:space-between;gap:10px;color:#adbad0;font-size:11px;margin-bottom:8px}.timeline-top span:first-child{color:#e5eef8;font-weight:700}.timeline-wrap input{width:100%;accent-color:#8de8d5;cursor:pointer}.controls-secondary{display:flex;align-items:center;gap:13px;color:#9eacc2;font-size:12px;white-space:nowrap}.controls-secondary select,.controls-secondary button{border:1px solid #3b4a64;background:#1b2940;color:#e4eef8;border-radius:8px;padding:9px 11px;font:inherit;cursor:pointer}.controls-secondary button:hover,.controls-secondary select:hover{border-color:#8de8d5}.details{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 4px 60px}.details>div{display:flex;flex-direction:column;gap:8px}.detail-label{font-size:10px;letter-spacing:.18em;color:#74849f}.details strong{font-size:13px;font-weight:600;color:#d5deeb}footer{border-top:1px solid #29344e;display:flex;justify-content:space-between;gap:16px;padding:28px 0 40px;font-size:11px;color:#7e8ba5;letter-spacing:.06em}@media(max-width:740px){.page{width:min(100% - 28px,580px)}.header{height:68px}.header-tag{display:none}.intro{padding:42px 0 28px}h1{font-size:clamp(34px,8.6vw,50px)}.intro p{font-size:13px}.viewer{height:500px;min-height:0}.viewer-toolbar{padding:17px;font-size:9px}.viewer-toolbar span:last-child{display:none}.viewer-hint{right:16px;bottom:16px}.control-panel{display:block;padding:17px}.controls-secondary{justify-content:flex-end;margin-top:16px}.controls-secondary label{margin-right:auto}.details{grid-template-columns:repeat(2,1fr);gap:24px 12px;padding:34px 2px 45px}footer{flex-direction:column;gap:7px}}.motion-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}.motion-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:108px;padding:16px 18px;border:1px solid #31415d;border-radius:14px;background:#121c30;color:#dce7f4;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.motion-choice:hover{transform:translateY(-2px);border-color:#6cafaa}.motion-choice.active{border-color:#86e6d4;background:linear-gradient(140deg,#203e49,#162738);box-shadow:inset 0 0 0 1px #86e6d433}.motion-choice .motion-number{font-size:10px;letter-spacing:.18em;color:#81cdbf}.motion-choice strong{font-size:18px;font-weight:700}.motion-choice small{font-size:10px;letter-spacing:.11em;color:#96a8bd}.motion-choice.active small{color:#b6e8e0}.motion-choice:focus-visible{outline:2px solid #9cf7e5;outline-offset:3px}@media(max-width:740px){.motion-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}.motion-choice{min-height:91px;padding:11px 13px;gap:5px}.motion-choice strong{font-size:16px}.motion-choice small{font-size:9px}}