:root{font-family:system-ui,'Yu Gothic',sans-serif;color:#213c34;background:#f4f6f0;font-size:15px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:24px;padding:22px 5%;border-bottom:1px solid #dce4d7;background:#fff}header a{color:#204f3d;font-weight:850;letter-spacing:2px;text-decoration:none}header span{flex:1;font-size:12px;color:#748075}main{max-width:1100px;margin:auto;padding:40px 24px}.intro{padding:12px 0 30px}small{letter-spacing:3px;color:#6c8268;font-weight:700;font-size:11px}h1{font-size:42px;line-height:1.5;letter-spacing:1px;margin:12px 0}p{line-height:1.8;color:#647568}h2{font-size:18px;margin:0 0 18px}.card{background:#fff;border:1px solid #dfe5d9;border-radius:18px;padding:26px;margin-bottom:22px}.title{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.title span,.hint{font-size:12px;color:#788475}.actions,.transport{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,.button,.primary,select{font:inherit;border:1px solid #ccd7c7;background:#fff;border-radius:9px;padding:11px 16px;color:#284c39;cursor:pointer;display:inline-block}button:hover,.button:hover{background:#eef4e9}.primary{background:#285c42;color:#fff;border-color:#285c42;font-weight:650}.primary:hover{background:#1d4833}label input[type=file]{display:block;max-width:260px;margin-top:10px;font-size:12px}input[type=checkbox]{accent-color:#285c42}.viewers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.caption{font-size:12px;padding:12px 0;font-weight:600}.caption select{max-width:65%;padding:6px}.stage{position:relative;background:#152a23;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}video{width:100%;height:100%;object-fit:contain;display:block}canvas{position:absolute;pointer-events:none}#empty{position:absolute;color:#b9cbbb;text-align:center;font-size:35px}#empty p{color:#b9cbbb;font-size:14px}.transport{margin-top:18px}.transport label{font-size:12px}#seek{width:100%;accent-color:#285c42;margin:20px 0 8px}.time{display:flex;justify-content:space-between;align-items:center;font-size:12px}.time button{padding:7px 12px}#phases{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.phase{background:#f3f6ef;padding:12px;border-radius:10px}.phase button{width:100%;padding:8px 3px;font-size:12px;margin-top:5px}.phase small{letter-spacing:0;display:block;font-size:12px;margin-bottom:6px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}.fields label{font-size:12px}input:not([type]),textarea{display:block;width:100%;font:inherit;border:1px solid #d3dccd;border-radius:8px;padding:12px;margin-top:8px}textarea{resize:vertical;min-height:70px}#status{font-size:13px;background:#f2f6ee;padding:12px;border-radius:8px}.entry{display:flex;gap:10px;align-items:center;padding:15px 0;border-top:1px solid #e5eadf}.entry .details{flex:1;overflow-wrap:anywhere}.entry p{font-size:12px;margin:5px 0}.entry button{font-size:12px;padding:8px}footer{text-align:center;font-size:12px;line-height:2;color:#788475;margin:30px}dialog{max-width:540px;border:0;border-radius:18px;padding:30px;line-height:2}dialog::backdrop{background:#122c23aa}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}@media(max-width:600px){header span{display:none}header{justify-content:space-between;padding:15px}main{padding:22px 14px}h1{font-size:31px}.card{padding:18px}#phases{grid-template-columns:repeat(2,1fr)}.fields{grid-template-columns:1fr}.entry{flex-wrap:wrap}.title{flex-wrap:wrap}.transport{gap:6px}.transport button{padding:10px}}

#loadStatus{padding:12px;background:#eef4e9;border-radius:8px;font-weight:600}
.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.reference-grid h3{font-size:16px}.reference-grid input{width:100%;padding:12px;border:1px solid #ccd7c7;border-radius:8px;margin:8px 0}.reference-grid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-top:15px}.coach-check{border-top:1px solid #e5eadf;padding:18px 0}.coach-check select{max-width:100%;margin-right:10px}.coach-check p{font-size:13px}#adviceResult:not(:empty){background:#f0f5e9;padding:18px;border-radius:12px;margin:16px 0}#coachSources{margin-top:25px;font-size:12px}a{color:#285c42}#coach .actions{margin:12px 0}@media(max-width:700px){.reference-grid{grid-template-columns:1fr}}

.needs-registration{outline:3px solid #d38a24;outline-offset:3px}#phaseProgress{background:#f2f6ee;padding:12px;border-radius:8px;font-weight:600}

html{scroll-behavior:smooth;scroll-padding-top:20px}body{padding-top:env(safe-area-inset-top);padding-bottom:calc(76px + env(safe-area-inset-bottom))}header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:8px}button,.button,.primary,select{min-height:44px;touch-action:manipulation}input,textarea,select{font-size:16px}input[type=checkbox]{min-width:20px;min-height:20px;vertical-align:middle}main{padding-bottom:10px}header a{font-size:14px;letter-spacing:1px}header button{font-size:12px;padding:8px}.free-badge{font-size:12px;display:inline-block;background:#e4efd8;border-radius:30px;padding:4px 12px;margin:10px 0}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:space-around;background:#fff;border-top:1px solid #dce4d7;padding:8px 5px calc(8px + env(safe-area-inset-bottom));gap:5px}.mobile-nav a{padding:12px 10px;text-align:center;text-decoration:none;border-radius:9px;font-size:13px;font-weight:650;min-height:44px}.mobile-nav a:active{background:#e4efd8}.guided-phase{padding:14px;background:#eef4e9;border-radius:12px;margin-top:18px}.guided-phase p{margin:0 0 10px;font-size:13px}.guided-phase button{width:100%;background:#285c42;color:white}.device-card p{font-size:13px}.phase button{font-size:13px}.entry .details{min-width:150px}.entry button{min-height:44px}.viewers>div{min-width:0}.transport{position:relative}dialog{max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto}dialog input{min-width:0}.viewers:has(#comparePanel:not([hidden])){grid-template-columns:1fr 1fr}.caption select{width:100%;max-width:100%;font-size:13px}.title h2{line-height:1.5}#installDialog li{padding-bottom:10px}.offline-badge{font-size:12px;color:#657760}
@media(max-width:600px){main{padding:16px 12px}.intro{padding:0 6px 14px}h1{font-size:30px;margin:8px 0}.card{padding:18px 14px;border-radius:14px;margin-bottom:15px}#record .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}#record .actions label{min-width:0;font-size:13px;padding:12px}#record input[type=file]{width:100%;font-size:11px;max-width:100%}.transport button{flex:1;font-size:13px}.transport select{padding:8px}#help{font-size:11px}.fields{gap:10px}.time button{font-size:12px}#phases{gap:8px}footer{margin:20px 8px}}

#shotResult select,#practiceSummary select{display:block;width:100%;margin-top:8px}#shotResult input{display:block;width:100%;padding:12px;margin-top:8px;border:1px solid #d3dccd;border-radius:8px;font:inherit}#shotFeedback,#resultSummary{padding:12px;background:#eef4e9;border-radius:10px;line-height:1.8}#practiceSummary{margin-bottom:18px}#practiceSummary label{display:block;max-width:360px}

#targetSettings select,#targetSettings input:not([type=checkbox]){display:block;width:100%;margin-top:8px}#targetSettings{background:#f3f6ef;padding:16px;border-radius:12px;margin-bottom:16px}#comparePanel>label select{display:block;width:100%;margin:8px 0}#targetHistory .entry{border-left:3px solid #8a9d65;padding-left:12px}#compareInfo{background:#eef4e9;padding:10px;border-radius:8px}

#comparePanel input[type=file]{width:100%;max-width:100%}#compareSeek{width:100%;accent-color:#285c42;margin-top:12px}#comparePhases{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}#comparePhases button{width:100%;padding:8px 4px;font-size:12px}#comparisonEditor .fields{grid-template-columns:1fr;margin-top:12px}#comparisonEditor input:not([type=checkbox]){width:100%}#comparisonEditor .primary{margin:12px 0}#updateNotice{margin:12px;padding:12px;background:#eef4e9}

/* Comparison: keep both video frames aligned; settings use the full card width. */
#review .viewers{--viewer-gap:12px;--frame-limit:65vh;align-items:start;gap:var(--viewer-gap);grid-template-columns:minmax(0,1fr);width:100%;max-width:calc(var(--frame-limit) * 1.333333);margin-inline:auto}
#review .viewers:has(#comparePanel:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(var(--frame-limit) * 1.5 + var(--viewer-gap))}
#review .viewers.stacked:has(#comparePanel:not([hidden])){grid-template-columns:minmax(0,1fr);max-width:calc(var(--frame-limit) * .75)}
#review .viewers .caption{height:34px;padding:8px 0;font-size:12px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#review .viewers>div{width:100%;min-width:0}
#review .viewers .stage{width:100%;height:auto;aspect-ratio:3/4;max-height:none}
@supports(height:1dvh){#review .viewers{--frame-limit:65dvh}}
#review .viewers:not(:has(#comparePanel:not([hidden]))) .stage{aspect-ratio:4/3}
#comparisonTools{margin:16px 0;padding-top:12px;border-top:1px solid #dfe5d9;min-width:0}
#review:has(#comparePanel[hidden]) #comparisonTools{display:none}
.comparison-align{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.comparison-align label{font-size:12px}.comparison-align select{display:block;width:100%;margin-top:6px}
#comparisonLayout{width:100%;margin:12px 0;font-size:13px}
.comparison-options{border-top:1px solid #dfe5d9;padding:12px 0}
.comparison-options summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;font-size:14px}
.comparison-options summary:before{content:'＋';margin-right:10px}.comparison-options[open]>summary:before{content:'−'}
.comparison-options .button{display:block;margin:10px 0}
.comparison-selectors{display:grid;gap:8px;font-size:12px}
.comparison-selectors select{display:block;width:100%;min-width:0;margin-top:6px}
#comparisonEditor .transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#comparisonEditor .transport label{grid-column:1/-1}
#comparisonEditor .transport button{font-size:13px;padding:10px 4px;white-space:nowrap}
#comparisonEditor details{margin-top:12px}
#comparisonLoadState:empty{display:none}
#loadStatus{font-size:12px;line-height:1.6;padding:8px 10px;font-weight:400;margin-top:0}
#review>.title{align-items:center;gap:8px;margin-bottom:10px}#review>.title h2{margin:0}#review>.title label{font-size:12px;white-space:nowrap}
@media(max-width:600px){
 #review .viewers{--viewer-gap:8px}#review .viewers .stage{border-radius:8px}
 #review .transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #review .transport button{font-size:13px;padding:10px 4px;white-space:nowrap}
 #review .transport>select{grid-column:1}#review .transport>label{grid-column:2/4;display:flex;align-items:center;justify-content:flex-end;gap:6px}
 #review .time{gap:8px}#review .time button{font-size:12px;padding:8px}
 #empty{font-size:24px}#empty p{font-size:11px;padding:0 6px}
 .comparison-align button{font-size:13px;padding:10px 4px}
}

.loop-toggle{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-size:14px;width:fit-content;cursor:pointer}

.pose-toggles{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 8px}.pose-toggles label{display:flex;align-items:center;gap:6px;min-height:44px;font-size:13px}.pose-toggles input{margin:0}

/* Keep the actual videos and their skeleton canvases visible during phase editing. */
#review.preview-pinned .viewers{position:sticky;top:0;z-index:5;background:#fff;padding:6px 0 10px;border-bottom:1px solid #dfe5d9;box-shadow:0 6px 12px #213c3414;--frame-limit:clamp(120px,28vh,240px);max-width:none;justify-content:center;grid-template-columns:minmax(0,calc(var(--frame-limit) * 1.333333))}
#review.preview-pinned .viewers:has(#comparePanel:not([hidden])){max-width:none;grid-template-columns:repeat(2,minmax(0,calc(var(--frame-limit) * .75)))}
@supports(height:1dvh){#review.preview-pinned .viewers{--frame-limit:clamp(120px,28dvh,240px)}}
#review.preview-pinned .viewers .caption{height:26px;padding:4px 0}
#review.preview-pinned button,#review.preview-pinned input,#review.preview-pinned summary{scroll-margin-top:calc(28vh + 64px)}
#comparePhases{margin-top:12px}

.review-step{border-top:1px solid #dfe5d9;padding-top:18px;margin-top:20px;min-width:0}
.review-step h3{font-size:16px;margin:0 0 12px;line-height:1.6}
.registration-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.registration-heading h3{margin:0}.registration-heading button{font-size:12px;padding:8px 10px}
#review:has(#comparePanel[hidden]) #targetEdit{display:none}
#review.preview-pinned .review-step{scroll-margin-top:calc(28vh + 60px)}
#record .comparison-selectors{grid-template-columns:1fr 1fr}
@media(max-width:600px){#record .comparison-selectors{grid-template-columns:1fr}}
/* Dedicated single-video editor: playback stays directly below the selected video. */
#phaseDialog{width:min(620px,calc(100vw - 16px));height:calc(100dvh - 16px);max-width:none;max-height:none;padding:0;border-radius:14px;overflow:hidden;color:#213c34}
#phaseDialog[open]{display:flex;flex-direction:column}
.focus-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #dfe5d9;flex:none}
.focus-header h2{font-size:17px;margin:0}.focus-header button{padding:8px 14px}
.focus-content{overflow:auto;padding:0 14px 18px;min-height:0;overscroll-behavior:contain}
.focus-playback{position:sticky;top:0;z-index:2;background:#fff;padding:8px 0;border-bottom:1px solid #dfe5d9}
#phaseDialog .focus-stage{width:min(100%,calc(32dvh * .75));height:32dvh;max-height:320px;aspect-ratio:3/4;margin:0 auto 8px}
.focus-transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.focus-transport button{padding:8px 4px;white-space:nowrap;font-size:14px}
.focus-options{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;margin-top:6px}
.focus-options label{display:flex;align-items:center;gap:6px;min-height:36px}.focus-options select{padding:6px;min-height:36px}
#focusSeek{width:100%;margin:8px 0 0;accent-color:#285c42}#focusPhases{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
#focusPhases button{width:100%;font-size:13px;padding:8px 4px}#focusPhases .phase small{letter-spacing:0}#focusStatus{font-size:12px;line-height:1.6;margin:10px 0}#finishPhaseEditor{width:100%}
#phaseDialog button{scroll-margin-top:calc(32dvh + 200px)}
@media(orientation:landscape) and (max-height:600px){#phaseDialog .focus-stage{height:24dvh;width:calc(24dvh * .75)}.focus-header{padding:4px 14px}.focus-playback{padding:4px 0}.focus-options{margin-top:2px}#focusPhases{grid-template-columns:repeat(4,minmax(0,1fr))}}

#cloudTools .actions{margin:14px 0}#cloudTools input[type=password],#cloudTools input[type=text]{width:100%;max-width:100%;font:inherit;padding:10px;border:1px solid #ccd7c7;border-radius:8px}#cloudKey{overflow-wrap:anywhere}#cloudTools details{margin-bottom:16px}#cloudTools h3{font-size:16px}#cloudTools label:has(#normalSpeed){display:block;margin:12px 0}#cloudRecords{max-height:480px;overflow:auto}#cloudTools .entry label{max-width:100%}

.app-version{font-size:12px;font-weight:600;color:#284c39;margin:0 0 8px}