/* ボケシミュレーター：/doc/デザイン2.html（base.css の配色＋モーション）準拠 */
:root{--kit-line:#eee;--kit-safe-bg:#e6fffa;--kit-safe:#2c7a7b;--kit-warning-bg:#fffaf0;--kit-warning:#c05621;--kit-warning-line:#fbd38d;--kit-shadow-card:0 10px 30px rgba(0,0,0,.05);--kit-shadow-form:0 10px 40px rgba(0,0,0,.05);--kit-shadow-result:0 4px 10px rgba(0,0,0,.1);--kit-grad:linear-gradient(90deg,#00AEEF,#FFD93D,#FF6B6B);--kit-grad-loop:linear-gradient(90deg,#00AEEF,#FFD93D,#FF6B6B,#00AEEF);--kit-glow:0 18px 40px rgba(0,174,239,.18);--spring:cubic-bezier(.34,1.56,.64,1);--smooth:cubic-bezier(.2,.8,.2,1);--sticky-top:92px}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body.boke-page{overflow-x:clip;background:#fff}
.boke-page *,.boke-page *::before,.boke-page *::after{box-sizing:border-box}
.boke-page [hidden]{display:none!important}
:where(.boke-page) :where(h1,h2,h3,p,dl,dd,ul,figure){margin:0}
:where(.boke-page) ul{padding:0;list-style:none}
.boke-page :is(button,input,select){font-family:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.noscript{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;padding:14px 18px;border:1px solid var(--kit-warning-line);border-radius:8px;background:var(--kit-warning-bg);color:var(--kit-warning);font-size:14px}

/* ===== 共通キーフレーム ===== */
@keyframes kit-rise{from{opacity:0;transform:translateY(32px) scale(.97);filter:blur(6px)}}
@keyframes spin-angle{to{--angle:360deg}}
@keyframes grad-flow{to{background-position:200% 0}}
@keyframes icon-bob{50%{translate:0 -6px;rotate:-6deg}}
@keyframes out-bump{50%{transform:scale(1.12)}}
@keyframes panel-in{from{opacity:0;transform:translateY(-8px)}}

/* ===== スクロール進捗・演出レイヤー ===== */
.scroll-progress{position:fixed;top:0;left:0;z-index:1001;width:100%;height:4px;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:var(--kit-grad);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(0,174,239,.45)}
.fx-canvas{position:fixed;inset:0;z-index:1500;width:100%;height:100%;pointer-events:none}

/* ===== Hero（shift-maker と共通のデザイン） ===== */
.boke-hero{padding-bottom:12px}
.boke-hero-title{font-size:clamp(1.4rem,5.8vw,2.5rem)}
.boke-hero .hero-text{margin-bottom:0}
.boke-hero .hero-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.boke-hero .language-link{color:var(--primary-color);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* ===== ページ骨格 ===== */
.kit{max-width:1120px;margin:auto;padding:0 32px 80px}
.kit-nav{position:sticky;top:calc(var(--header-bottom,80px) + 12px);z-index:50;transition:top .3s ease;display:flex;gap:2px;width:max-content;max-width:100%;margin:20px auto 10px;padding:6px;overflow-x:auto;border:1px solid rgba(0,174,239,.16);border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.07);font-size:13px;font-weight:700;scrollbar-width:none}
.kit-nav.header-hidden{top:12px}
.kit-nav::-webkit-scrollbar{display:none}
.kit-nav a{position:relative;z-index:1;flex:0 0 auto;padding:8px 14px;border-radius:999px;color:var(--text-main);text-decoration:none;white-space:nowrap;transition:color .3s,background-color .3s}
.kit-nav a:not(.is-active):hover{background:rgba(255,217,61,.4)}
.kit-nav a.is-active{color:#fff}
.nav-ink{position:absolute;top:6px;left:0;z-index:0;height:calc(100% - 12px);width:0;border-radius:999px;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));box-shadow:0 6px 16px rgba(0,174,239,.35);opacity:0;transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s}
.kit-section{position:relative;isolation:isolate;padding:38px 0 46px;border-bottom:1px solid var(--kit-line)}
.kit-section:last-child{border-bottom:0}
.kit-section::before{content:attr(data-no);position:absolute;top:8px;right:0;z-index:-1;color:transparent;-webkit-text-stroke:2px rgba(0,174,239,.14);font-size:clamp(84px,14vw,180px);font-weight:800;line-height:1;letter-spacing:-.04em;transform:translateY(var(--parallax,0px));pointer-events:none;user-select:none}
.section-head{display:flex;gap:22px;align-items:baseline;margin-bottom:12px}
.section-no{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 8px;border-radius:999px;background:var(--primary-color);color:#fff;font:700 12px/1 ui-monospace,monospace;box-shadow:0 6px 14px rgba(0,174,239,.3)}
.section-head h2{position:relative;font-size:26px;font-weight:800;line-height:1.4}
.section-head h2::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:4px;border-radius:4px;background:var(--kit-grad);transform-origin:left}
.js-motion .section-head:not(.is-in) h2::after{transform:scaleX(0)}
.js-motion .section-head.is-in h2::after{animation:underline-draw 1s cubic-bezier(.6,0,.2,1) .25s backwards}
@keyframes underline-draw{from{transform:scaleX(0)}}
.section-head h2 small{margin-left:14px;color:var(--text-sub);font-size:13px;font-weight:400}
.section-desc{max-width:820px;margin:18px 0 28px;color:var(--text-sub);font-size:14px;line-height:1.9}
.field-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0;font-size:14px;font-weight:700;color:var(--text-main)}
.field-label small{color:var(--text-sub);font-size:12px;font-weight:700}
.field-label i{color:var(--primary-color)}
.field-help{display:flex;gap:7px;align-items:flex-start;margin-top:10px;color:var(--text-sub);font-size:12px;line-height:1.7}
.field-help i{margin-top:3px;color:var(--primary-color)}
.field-help.is-warning{color:var(--kit-warning)}
.field-help.is-warning i{color:var(--kit-warning)}

/* ===== 出現アニメーション ===== */
.js-motion [data-reveal]:not(.is-in),.js-motion [data-stagger]:not(.is-in)>*{opacity:0;transform:translateY(24px)}
.js-motion [data-reveal].is-in{animation:kit-rise .8s var(--smooth) backwards}
.js-motion [data-stagger].is-in>*{animation:kit-rise .8s var(--smooth) backwards;animation-delay:calc(var(--i,0)*90ms)}

/* ===== ボタン ===== */
.kit .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;min-height:46px;font-size:14px;text-decoration:none;transition:transform .35s var(--spring),box-shadow .25s,background-color .25s,background-size .45s cubic-bezier(.6,0,.2,1),color .3s}
.kit .btn:hover{transform:translateY(-1px)}
.kit .btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.kit .btn i{margin-right:8px}
.kit .btn-primary:hover{background:var(--primary-hover);box-shadow:0 10px 24px rgba(0,174,239,.35)}
.kit .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .75s var(--smooth)}
.kit .btn-primary:hover::before{transform:translateX(120%)}
.btn[data-magnetic],.btn[data-magnetic]:hover{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.btn.btn-fill{background:linear-gradient(var(--primary-color),var(--primary-color)) no-repeat 0 0/0% 100%,#fff}
.btn.btn-fill:hover{background-size:100% 100%;color:#fff}
.kit .btn-sm-kit{min-height:38px;padding:7px 16px;font-size:13px}
.kit .btn-sm-kit:hover{background:var(--primary-color);color:#fff}
.kit .btn:disabled{border-color:#ddd;background:#eee;color:#888;cursor:not-allowed;transform:none;box-shadow:none}
.ripple{position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:ripple .7s var(--smooth) forwards}
.btn-secondary .ripple{background:rgba(0,174,239,.2)}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.text-button{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--text-sub);font-size:13px;font-weight:700;cursor:pointer;transition:color .2s,background-color .2s}
.text-button:hover{background:var(--bg-light);color:var(--accent-pink)}
.text-link{display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;color:var(--primary-color);font-size:14px;font-weight:700;text-decoration:none;background:linear-gradient(90deg,#00AEEF,#FF6B6B) no-repeat 0 100%/0% 3px,linear-gradient(var(--primary-color),var(--primary-color)) no-repeat 0 100%/100% 1px;transition:background-size .45s cubic-bezier(.6,0,.2,1)}
.text-link:hover{background-size:100% 3px,100% 1px}
.text-link i{font-size:12px;transition:transform .35s var(--spring)}
.text-link:hover i{transform:translateY(-3px)}
:is(.kit,.to-top) :is(button,a,summary,input,select):focus-visible,.to-top:focus-visible{outline:3px solid var(--primary-color);outline-offset:3px}

/* ===== 傾くカード ===== */
[data-tilt]{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--smooth),box-shadow .3s}
[data-tilt].is-tilting{transition:transform .12s linear,box-shadow .3s}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),var(--glare,rgba(255,255,255,.45)),transparent 60%);opacity:0;transition:opacity .35s}
[data-tilt].is-tilting::after{opacity:1}

/* ===== シミュレーター ===== */
.studio{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(340px,1fr);gap:28px;align-items:start}
/* PCは設定パネルを動かしている間もプレビューが見えるよう、左列を固定する。 */
.stage-col{position:sticky;top:calc(var(--header-bottom,80px) + 78px);z-index:5;display:flex;flex-direction:column;gap:18px;min-width:0}
.stage-col.is-static{position:relative;top:auto}
.studio-extras{display:grid;margin-top:28px;grid-template-columns:1fr;gap:28px;align-items:center}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.preview-toolbar h3{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800}
.preview-toolbar h3 i{color:var(--primary-color)}
.toolbar-actions{display:flex;align-items:center;gap:8px}
.toolbar-actions [hidden]{display:none}
.preview-sticky{position:relative;z-index:5}
.preview{position:relative;aspect-ratio:3/2;overflow:hidden;isolation:isolate;border-radius:16px;background:#26313a;box-shadow:0 18px 40px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.04);touch-action:pan-y}
.scene-layer,.scene-background{position:absolute;inset:0}
.scene-background{background-size:cover;background-position:center;transform:scale(1.04);will-change:filter}
.scene-subject{position:absolute;left:0;top:0;width:auto;max-width:none;height:0;transform-origin:0 0;filter:drop-shadow(0 6px 4px rgba(0,0,0,.14));pointer-events:none;user-select:none}
.saved-scene{position:absolute;inset:0;z-index:1;clip-path:inset(0 50% 0 0)}
.view-corner{position:absolute;z-index:3;width:20px;height:20px;border:0 solid rgba(255,255,255,.85);pointer-events:none}
.view-corner.top-left{top:12px;left:12px;border-width:2px 0 0 2px;border-top-left-radius:6px}
.view-corner.top-right{top:12px;right:12px;border-width:2px 2px 0 0;border-top-right-radius:6px}
.view-corner.bottom-left{bottom:12px;left:12px;border-width:0 0 2px 2px;border-bottom-left-radius:6px}
.view-corner.bottom-right{bottom:12px;right:12px;border-width:0 2px 2px 0;border-bottom-right-radius:6px}
.view-settings{padding:4px 10px;border-radius:999px;background:rgba(20,28,34,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.view-settings{position:absolute;left:50%;bottom:16px;z-index:3;max-width:calc(100% - 80px);transform:translateX(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.view-settings span{margin:0 6px;color:var(--accent-yellow)}
.compare-labels{position:absolute;top:48px;left:16px;right:16px;z-index:4;display:flex;justify-content:space-between;pointer-events:none}
.compare-labels span{padding:4px 10px;border-radius:999px;background:var(--accent-yellow);color:var(--text-main);font-size:11px;font-weight:800;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.compare-labels span:last-child{background:var(--primary-color);color:#fff}
.compare-divider{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:44px;margin-left:-22px;cursor:ew-resize;touch-action:none}
.compare-divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35)}
.compare-divider span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--primary-color);box-shadow:0 6px 16px rgba(0,0,0,.25);transform:translate(-50%,-50%);transition:transform .3s var(--spring)}
.compare-divider:hover span,.compare-divider.is-dragging span{transform:translate(-50%,-50%) scale(1.12)}
.asset-error{position:absolute;inset:auto 16px 50px;z-index:5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px 14px;border:1px solid var(--kit-warning-line);border-radius:8px;background:var(--kit-warning-bg);color:var(--kit-warning);font-size:13px;font-weight:700}
.asset-error button{padding:4px 12px;border:1px solid currentColor;border-radius:999px;background:#fff;color:inherit;font-weight:700;cursor:pointer}
.asset-error[hidden]{display:none}
.compare-controls{padding:14px 18px;border-radius:12px;background:var(--bg-light);animation:panel-in .45s var(--smooth)}
.compare-controls[hidden]{display:none}
.compare-controls .range-row{margin:0}
.compare-controls .field-label{flex:0 0 auto;margin:0}
.compare-summary{margin-top:6px;color:var(--text-sub);font-size:12px;line-height:1.7}

/* シーン選択 */
.scene-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.scene-choice{position:relative;display:block;padding:0;overflow:hidden;border:2px solid transparent;border-radius:12px;background:#fff;box-shadow:var(--kit-shadow-card);cursor:pointer;text-align:left;transition:transform .3s var(--spring),border-color .2s,box-shadow .3s}
.scene-choice img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--smooth),filter .3s}
.scene-choice span{display:block;padding:7px 8px;overflow:hidden;font-size:12px;font-weight:700;color:var(--text-sub);white-space:nowrap;text-overflow:ellipsis;transition:color .2s}
.scene-choice:hover{transform:translateY(-2px);box-shadow:var(--kit-glow)}
.scene-choice:hover img{transform:scale(1.06)}
.scene-choice[aria-pressed=true]{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(0,174,239,.14),var(--kit-glow)}
.scene-choice[aria-pressed=true] span{color:var(--primary-color)}
.scene-choice[aria-pressed=true]::after{content:"\f00c";position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary-color);color:#fff;font:900 12px/1 "Font Awesome 7 Free","Font Awesome 6 Free";box-shadow:0 4px 10px rgba(0,174,239,.4);animation:check-pop .5s var(--spring)}
@keyframes check-pop{from{transform:scale(0) rotate(-90deg)}}
.scene-choice[aria-pressed=false] img{filter:saturate(.75)}

/* 距離の関係 */
.distance-card{margin:16px 0 0;padding:16px 12px;border:1px solid var(--kit-line);border-radius:16px;background:#fff;box-shadow:var(--kit-shadow-card)}
.distance-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.distance-heading .field-label{margin:0}
.distance-heading>span{color:var(--text-sub);font-size:11px}
.distance-diagram{display:flex;align-items:center;gap:6px;padding:14px 0 6px}
.diagram-point{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;color:var(--text-sub);font-size:11px;font-weight:700}
.diagram-point i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bg-light);color:var(--primary-color);font-size:17px}
.subject-point i{background:var(--accent-yellow);color:var(--text-main);box-shadow:0 0 0 4px rgba(255,217,61,.3)}
.distance-line{position:relative;flex:var(--grow,1) 1 0;min-width:0;height:2px;margin-bottom:24px;background:repeating-linear-gradient(90deg,var(--primary-color) 0 6px,transparent 6px 11px)}
.distance-line.background-line{background:repeating-linear-gradient(90deg,var(--accent-pink) 0 6px,transparent 6px 11px)}
.distance-values{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.distance-values>label{display:flex;align-items:center;gap:4px;min-width:0;color:var(--text-sub);font-size:11px;white-space:nowrap}
.distance-input{display:inline-flex;align-items:center;gap:3px;min-width:0}
.distance-input input{width:70px;min-width:0;height:34px;padding:4px;border:1px solid var(--input-border);border-radius:7px;background:var(--bg-light);color:var(--text-main);font-family:inherit;font-size:14px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;appearance:textfield}
.distance-input input::-webkit-inner-spin-button,.distance-input input::-webkit-outer-spin-button{appearance:none;margin:0}
.distance-input input:focus{outline:2px solid var(--primary-color);outline-offset:2px}
.subject-point{padding:0;border:0;background:transparent;font:inherit;font-size:11px;font-weight:700;cursor:grab;touch-action:none;user-select:none}
.subject-point:focus-visible{outline:2px solid var(--primary-color);outline-offset:5px;border-radius:8px}
.subject-point.is-dragging{cursor:grabbing}
.distance-diagram{user-select:none}
@media(max-width:400px){.distance-values{gap:4px}.distance-values>label{font-size:10px;gap:2px}.distance-input input{width:58px;font-size:13px}.distance-foot{font-size:10px}}
.distance-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--kit-line);color:var(--text-sub);font-size:12px}
.distance-foot>label{display:flex;align-items:center;gap:5px}
.distance-foot strong{color:var(--primary-color);font-variant-numeric:tabular-nums}
.preview-note{padding:14px 18px;border-radius:12px;background:var(--bg-light);color:var(--text-sub);font-size:12px;line-height:1.8}
.preview-note .is-warning{color:var(--kit-warning);font-weight:700}

/* 設定パネル */
.controls-card{padding:28px 26px;border-radius:30px;background:#fff;box-shadow:var(--kit-shadow-form);border:1px solid rgba(0,174,239,.08)}
.controls-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.controls-heading h3{font-size:20px;font-weight:800}
.controls-heading p{margin-top:2px;color:var(--text-sub);font-size:13px}
.reset-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:2px solid var(--input-border);border-radius:50%;background:#fff;color:var(--text-sub);font-size:15px;cursor:pointer;transition:border-color .2s,color .2s,transform .5s var(--spring)}
.reset-button:hover{border-color:var(--primary-color);color:var(--primary-color);transform:rotate(-200deg)}
.subject-field{min-width:0;margin:0 0 20px;padding:0;border:0}
.subject-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.subject-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 4px 8px;border:2px solid transparent;border-radius:12px;background:var(--bg-light);color:var(--text-main);font-size:12px;font-weight:700;line-height:1.35;cursor:pointer;transition:transform .3s var(--spring),border-color .2s,background-color .2s,box-shadow .3s}
.subject-choice img{display:block;width:auto;height:58px;margin-bottom:3px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));transition:transform .45s var(--spring)}
.subject-choice span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.subject-choice small{color:var(--text-sub);font-size:10px;font-weight:400}
.subject-choice:hover{transform:translateY(-2px);box-shadow:var(--kit-glow)}
.subject-choice:hover img{transform:scale(1.08)}
.subject-choice[aria-pressed=true]{border-color:var(--primary-color);background:#fff;color:var(--primary-color);box-shadow:0 0 0 4px rgba(0,174,239,.14)}
.subject-choice[aria-pressed=true]::after{content:"\f00c";position:absolute;top:5px;right:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--primary-color);color:#fff;font:900 9px/1 "Font Awesome 7 Free","Font Awesome 6 Free";animation:check-pop .5s var(--spring)}
.sensor-field{min-width:0;margin:0 0 6px;padding:0;border:0}
.mode-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:#eee}
.mode-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 4px 8px;border:0;border-radius:10px;background:transparent;color:var(--text-sub);font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease}
.mode-tab small{font-size:10px;font-weight:400;white-space:nowrap}
.mode-tab .sensor-name{white-space:nowrap}
.mode-tabs.sensor-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.sensor-tabs .sensor-icon{width:48px;height:38px}
.mode-tab[aria-pressed=true]{background:#fff;color:var(--primary-color);box-shadow:0 2px 5px rgba(0,0,0,.1);animation:preset-bounce .3s cubic-bezier(.4,0,.2,1)}
@media(hover:hover){.mode-tab:hover{transform:scale(1.03)}}
.mode-tab:active{transform:scale(.95);animation:none}
@keyframes preset-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.mode-ink{display:none}
.mode-tabs.has-ink .mode-ink{position:absolute;top:0;left:0;z-index:0;display:block;border-radius:10px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.1),0 8px 18px rgba(0,174,239,.18);transition:transform .5s var(--spring),width .5s var(--spring),height .5s var(--spring),opacity .25s}
.mode-tabs.has-ink .mode-tab[aria-pressed=true]{background:transparent;box-shadow:none}
.sensor-icon{display:grid;place-items:center;width:40px;height:28px;margin-bottom:2px}
.sensor-icon::before{content:"";width:calc(var(--w)*1px);height:calc(var(--h)*1px);border:2px solid currentColor;border-radius:3px;background:rgba(0,0,0,.04);transition:background-color .3s}
.mode-tab[aria-pressed=true] .sensor-icon::before{background:rgba(0,174,239,.16)}
.control-group{padding:18px 0 16px;border-bottom:1px solid var(--kit-line)}
.control-group:last-of-type{border-bottom:0}
.control-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.control-head .field-label{margin:0}
.unit-field{position:relative;flex:0 0 auto;width:118px}
.unit-field .form-input{width:100%;height:44px;padding:0 40px 0 12px;font-size:17px;font-weight:800;text-align:right;color:var(--text-main);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.unit-field .form-input::-webkit-inner-spin-button,.unit-field .form-input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.unit-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-sub);font-size:13px;font-weight:700;pointer-events:none;transition:color .3s,transform .3s var(--spring)}
.unit-field:focus-within span{color:var(--primary-color);transform:translateY(-50%) scale(1.12)}
.unit-field.prefix .form-input{padding:0 12px 0 32px}
.unit-field.prefix span{right:auto;left:13px;font-style:italic}
.unit-field .form-input:focus{animation:focus-glow 1.8s ease-in-out infinite}
@keyframes focus-glow{50%{box-shadow:0 0 0 7px rgba(0,174,239,.16),0 10px 26px rgba(0,174,239,.16)}}
.unit-field.mini{width:104px}
.unit-field.mini .form-input{height:36px;font-size:14px;border-width:1px;background:#fff}
.sub-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:8px 8px 8px 14px;border-radius:10px;background:var(--bg-light);color:var(--text-sub);font-size:12px;font-weight:700}
p.sub-field{padding:10px 14px}
.sub-field strong{color:var(--primary-color);font-size:14px;font-variant-numeric:tabular-nums}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Toggle switch adapted from Uiverse.io by ErzenXz.（デザイン2のトグル） */
.toggle-row{display:flex;align-items:center;gap:12px;margin-top:12px;min-height:40px;font-size:13px;font-weight:700;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.toggle-row small{display:block;color:var(--text-sub);font-size:11px;font-weight:400}
.toggle-switch{position:relative;display:inline-block;flex:0 0 51.2px;width:51.2px;height:25.6px}
.toggle-switch input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.toggle-switch-background{position:absolute;inset:0;overflow:hidden;border-radius:999px;background:var(--input-border);box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);transition:background-color .3s ease,box-shadow .3s ease}
.toggle-switch-handle{position:absolute;z-index:1;top:3.2px;left:3.2px;width:19.2px;height:19.2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.toggle-switch input:checked + .toggle-switch-background{background:var(--primary-color);box-shadow:inset 0 0 0 2px var(--primary-hover),0 0 16px rgba(0,174,239,.45)}
.toggle-switch input:checked + .toggle-switch-background .toggle-switch-handle{transform:translateX(25.6px)}
.toggle-switch input:checked + .toggle-switch-background::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.75) 50%,transparent 75%);animation:toggle-sheen .7s ease-out forwards}
@keyframes toggle-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(hover:hover){.toggle-row:hover .toggle-switch-background{box-shadow:inset 0 0 0 2px rgba(0,0,0,.06),0 0 0 4px var(--input-focus-ring)}}
.toggle-row:active .toggle-switch-handle{transform:scale(.92)}
.toggle-row:active input:checked + .toggle-switch-background .toggle-switch-handle{transform:translateX(25.6px) scale(.92)}
.toggle-switch input:focus-visible + .toggle-switch-background{outline:2px solid var(--primary-color);outline-offset:3px;box-shadow:0 0 0 4px var(--input-focus-ring)}
.focal-head{flex-wrap:wrap;gap:8px}
.focal-values{display:flex;justify-content:flex-end;flex:1;gap:10px;flex-wrap:wrap}
.focal-values>label{display:flex;align-items:center;gap:4px;color:var(--text-sub);font-size:10px;font-weight:700;white-space:nowrap}
.focal-values .unit-field{width:72px}
.focal-values .unit-field .form-input{height:36px;padding:0 24px 0 5px;font-size:14px}
.focal-values .unit-field span{right:5px;font-size:10px}
@media(max-width:400px){.focal-values{gap:6px}.focal-values>label{gap:2px;font-size:9px}.focal-values .unit-field{width:63px}}
.lens-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-top:10px;color:var(--text-sub);font-size:12px;font-weight:700}
.lens-row small{font-weight:400}
.chip-tabs{display:flex;flex:0 0 auto;gap:3px;padding:3px;border-radius:10px;background:#eee}
.chip-tabs button{min-width:44px;padding:6px 9px;border:0;border-radius:8px;background:transparent;color:var(--text-sub);font-size:12px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s}
.chip-tabs button[aria-pressed=true]{background:#fff;color:var(--primary-color);box-shadow:0 2px 5px rgba(0,0,0,.1)}
.chip-tabs button:active{transform:scale(.95)}
.chip-tabs button:disabled{opacity:.5;cursor:not-allowed}
.range-row{display:flex;align-items:center;gap:16px;margin-top:14px}
.range-wrap{position:relative;display:flex;flex:1;align-items:center;min-width:0}
.range-wrap input{width:100%}
.range-row input[type=range]{appearance:none;-webkit-appearance:none;height:32px;margin:0;background:transparent;cursor:grab;--range-fill:50%;--handle-scale:1;--handle-motion:transform .42s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.range-row input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--primary-color) 0 var(--range-fill),#ddd var(--range-fill) 100%)}
.range-row input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--primary-color) 0 var(--range-fill),#ddd var(--range-fill) 100%)}
.range-row input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:0;border-radius:50%;background:var(--primary-color);transform:scale(var(--handle-scale));transition:var(--handle-motion);box-shadow:0 2px 5px rgba(0,0,0,.12),0 0 0 6px rgba(0,174,239,.14)}
.range-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--primary-color);transform:scale(var(--handle-scale));transition:var(--handle-motion);box-shadow:0 2px 5px rgba(0,0,0,.12),0 0 0 6px rgba(0,174,239,.14)}
@media(hover:hover){.range-row input[type=range]:hover{--handle-scale:1.05}}
.range-row input[type=range].is-grabbing{cursor:grabbing;--handle-scale:1.35;--handle-motion:transform .16s ease-out,box-shadow .2s ease}
.range-bubble{position:absolute;left:calc(11px + (100% - 22px) * var(--p,.5));bottom:calc(100% + 2px);padding:4px 9px;border-radius:8px;background:var(--primary-color);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 6px 14px rgba(0,174,239,.35);transform:translateX(-50%) scale(0);transform-origin:50% 130%;transition:transform .35s var(--spring)}
.range-bubble::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--primary-color)}
.range-wrap:hover .range-bubble,.range-wrap:focus-within .range-bubble{transform:translateX(-50%) scale(1)}
.range-wrap.is-grabbing .range-bubble{transform:translateX(-50%) scale(1.15)}
.range-ends{display:flex;justify-content:space-between;gap:10px;margin-top:2px;color:var(--text-sub);font-size:11px}

/* 結果 */
.results{margin-top:18px;padding-top:20px;border-top:2px dashed var(--kit-line)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result-sample{position:relative;height:100%;padding:16px 12px;overflow:hidden;border:2px solid #eee;border-radius:12px;background:#fff;text-align:center}
.result-sample p{color:var(--text-sub);font-size:12px;font-weight:700;line-height:1.5}
.result-sample .value{margin:6px 0 4px;font-size:30px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-sample .value small{font-size:14px}
.result-sample output{display:inline-block}
.result-sample.bump output{animation:out-bump .45s var(--spring)}
.result-sample.blue{border:0;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));box-shadow:var(--kit-shadow-result);color:#fff}
.result-sample.blue p{color:rgba(255,255,255,.92)}
.result-sample.blue::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:card-shine 3.6s ease-in-out infinite}
@keyframes card-shine{0%,35%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.glow-frame{position:relative;isolation:isolate;padding:3px;border-radius:15px;background:conic-gradient(from var(--angle),#00AEEF,#FFD93D,#FF6B6B,#00AEEF);animation:spin-angle 4s linear infinite}
.glow-frame::before{content:"";position:absolute;inset:8px;z-index:-1;border-radius:inherit;background:inherit;filter:blur(20px);opacity:.45}
.result-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.result-meta div{padding:8px 6px;border-radius:10px;background:var(--bg-light);text-align:center}
.result-meta dt{color:var(--text-sub);font-size:11px;font-weight:700}
.result-meta dd{margin:2px 0 0;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

/* ===== 計算式 ===== */
.formula-card{position:relative;padding:26px 28px;border-radius:16px;background:#fff;box-shadow:var(--kit-shadow-card);border:1px solid var(--kit-line)}
.formula-card.small{padding:22px 24px}
.formula-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--text-sub);font-size:13px;font-weight:700}
.realtime-dot{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;background:rgba(0,174,239,.1);color:var(--primary-color);font-size:11px}
.realtime-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary-color);animation:live-dot-blue 1.8s ease-out infinite}
@keyframes live-dot-blue{0%{box-shadow:0 0 0 0 rgba(0,174,239,.6)}70%,100%{box-shadow:0 0 0 7px rgba(0,174,239,0)}}
.formula{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:22px 0 14px;font-family:"Times New Roman",Georgia,serif;font-size:30px}
.formula i{font-style:italic}
.fraction{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.fraction>span{padding:2px 10px}
.fraction>span:first-child{border-bottom:2px solid var(--text-main)}
.formula strong{padding:4px 14px;border-radius:12px;background:linear-gradient(transparent 62%,var(--accent-yellow) 62%);color:var(--primary-color);font-family:'M PLUS Rounded 1c',sans-serif;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.formula strong small{font-size:15px}
.substitution{padding:10px 14px;border-radius:8px;background:var(--bg-light);color:var(--text-sub);font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.formula-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.formula-legend div{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--kit-line)}
.formula-legend dt{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:rgba(0,174,239,.1);color:var(--primary-color);font:italic 700 16px/1 "Times New Roman",Georgia,serif}
.formula-legend dd{margin:0;color:var(--text-sub);font-size:12px;line-height:1.5}
.formula-legend strong{display:block;color:var(--text-main);font-size:15px;font-variant-numeric:tabular-nums}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.math-detail{padding:12px 14px;border-radius:8px;background:var(--bg-light);font:13px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace}
.formula-note{margin-top:12px;color:var(--text-sub);font-size:13px;line-height:1.8}
.formula-note strong{color:var(--primary-color);font-variant-numeric:tabular-nums}

/* ===== ヒント ===== */
.tips-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:24px;border-radius:16px;background:var(--bg-light)}
.sample-card{min-height:200px;padding:24px 20px;border-radius:16px;background:#fff;box-shadow:var(--kit-shadow-card);--glare:rgba(0,174,239,.12)}
.sample-card:hover{box-shadow:var(--kit-glow)}
.sample-card h3{margin:0 0 8px;font-size:16px;font-weight:800}
.sample-card p{color:var(--text-sub);font-size:13px;line-height:1.85}
.sample-icon{display:inline-block;margin-bottom:16px;color:var(--primary-color);font-size:24px;animation:icon-bob 3.2s ease-in-out infinite}
.tips-grid>:nth-child(2) .sample-icon{color:var(--accent-pink);animation-delay:-.8s}
.tips-grid>:nth-child(3) .sample-icon{color:#e0b400;animation-delay:-1.6s}
.tips-grid>:nth-child(4) .sample-icon{animation-delay:-2.4s}

/* ===== FAQ ===== */
.faq-list{overflow:hidden;border:1px solid #eee;border-radius:16px;background:#fff}
.faq-list details{border-bottom:1px solid #eee;transition:background-color .35s}
.faq-list details:last-child{border:0}
.faq-list summary{display:flex;align-items:center;gap:14px;padding:20px 24px;list-style:none;font-size:14px;font-weight:700;cursor:pointer;transition:color .25s}
.faq-list summary:hover{color:var(--primary-color)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .q{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:rgba(0,174,239,.1);color:var(--primary-color);font-size:15px;transition:transform .6s var(--spring),background-color .3s,color .3s}
.faq-list summary:hover .q{transform:scale(1.12)}
.faq-list summary::after{content:'';flex-shrink:0;width:12px;height:12px;margin-left:auto;background:linear-gradient(#666,#666) center/12px 2px no-repeat,linear-gradient(#666,#666) center/2px 12px no-repeat;transition:transform .5s var(--spring),background-size .35s}
.faq-list details[open]{background:var(--bg-light)}
.faq-list details[open] .q{background:var(--primary-color);color:#fff;transform:rotate(360deg)}
.faq-list details[open] summary::after{background-size:12px 2px,2px 0;transform:rotate(180deg)}
.faq-list details p{margin:0 24px 22px 68px;color:var(--text-sub);font-size:14px;line-height:1.9}
.faq-list details[open] p{animation:panel-in .5s var(--smooth) .05s backwards}
.faq-list a{color:var(--primary-color)}
.back-link{margin-top:28px;text-align:center}

/* ===== フッター・トップへ戻る ===== */
.footer-logo{margin-top:20px}
.to-top{position:fixed;right:20px;bottom:20px;z-index:1100;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--primary-color) calc(var(--p,0)*360deg),#e3edf3 0);box-shadow:0 10px 26px rgba(0,174,239,.25);color:var(--primary-color);opacity:0;transform:scale(.6) translateY(20px);pointer-events:none;transition:opacity .3s,transform .45s var(--spring)}
.to-top::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.to-top i{position:relative;transition:transform .3s var(--spring)}
.to-top:hover i{transform:translateY(-3px)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}

/* ===== レスポンシブ ===== */
@media(max-width:1020px){
  .studio{grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);gap:22px}
  .studio-extras{grid-template-columns:1fr;gap:22px}
  .tips-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formula-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  /* スマホ・タブレットはプレビューを上に固定し、設定を動かしながら見られるようにする。 */
  .kit-nav{position:relative;top:auto}
  .studio{display:flex;flex-direction:column;align-items:stretch;gap:18px}
  .stage-col{display:contents}
  .studio-extras{display:flex;flex-direction:column;gap:18px;margin-top:18px}
  .preview-toolbar{order:1}
  .preview-sticky{order:2;position:sticky;top:var(--sticky-top);z-index:20;transition:top .3s ease}
  .compare-controls{order:3}
  .scene-picker{order:4}
  .controls-card{order:5;width:100%}
  .preview-sticky.is-stuck .preview{box-shadow:0 14px 30px rgba(0,0,0,.25)}
}
@media(max-width:760px){
  html{scroll-padding-top:120px}
  .kit{padding:0 20px 40px}
  .kit-nav{width:auto}
  .kit-section{padding:28px 0 34px}
  .section-head{gap:12px}
  .section-head h2{font-size:22px}
  .section-head h2 small{display:block;margin:3px 0 0}
  .controls-card{padding:22px 16px;border-radius:24px}
  .mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-tab{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:8px;padding:10px 6px}
  .mode-tab small{flex-basis:100%;text-align:center}
  .sensor-tabs .mode-tab{flex-direction:column;flex-wrap:nowrap;column-gap:0;padding:10px 2px 8px;font-size:12px}
  .sensor-tabs .mode-tab small{flex-basis:auto;font-size:9px}
  .sensor-icon{width:36px;height:26px;margin:0}
  .pair{grid-template-columns:1fr}
  .formula-card{padding:20px 16px}
  .formula{gap:8px;font-size:22px}
  .formula strong{font-size:24px}
  .tips-grid{padding:16px;gap:12px}
  .faq-list summary{padding:18px 16px}
  .faq-list details p{margin-left:60px;margin-right:16px}
  .view-settings{bottom:12px;font-size:10px}
}
@media(max-width:480px){
  .scene-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .subject-choice img{height:50px}
  .scene-choice span{padding:6px 8px;font-size:12px}
  .result-grid{gap:10px}
  .result-sample .value{font-size:24px}
  .result-meta dd{font-size:13px}
  .tips-grid{grid-template-columns:1fr}
  .sample-card{min-height:0}
  .formula-legend{grid-template-columns:1fr}
  .compare-labels{top:44px;left:10px;right:10px}
  .view-corner{width:16px;height:16px}
}

/* ===== 動きを減らす設定 ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js-motion [data-reveal]:not(.is-in),.js-motion [data-stagger]:not(.is-in)>*{opacity:1;transform:none}
  .fx-canvas{display:none}
}

/* ヒントのカードから比較を始めるボタン */
.sample-card{display:flex;flex-direction:column}
.sample-card p{flex:1}
.tip-try{align-self:flex-start;margin-top:14px;border:0;padding:0 0 3px;font-family:inherit;text-align:left;cursor:pointer}
.compare-summary strong{display:block;color:var(--text-main);font-size:14px}