@charset "UTF-8";
:root{color-scheme:light;--ink:#233f37;--ink-deep:#183e35;--muted:#75827a;--line:#dce4de;--paper:#ffffff;--white:#fff;--accent:#a7bca5;--soft:#edf2eb;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #658e6d;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link{position:fixed;left:20px;top:-70px;z-index:100;background:var(--ink-deep);color:#fff;padding:12px 20px;border-radius:8px}.skip-link:focus{top:10px}
.app-header{height:80px;display:flex;align-items:center;gap:32px;padding:0 max(28px,calc((100vw - 1440px)/2));border-bottom:1px solid var(--line);background:#ffffff}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px 3px 12px 3px;background:var(--ink-deep);color:#fff;font-size:20px;letter-spacing:0}.brand strong{font-weight:650;display:block;font-size:19px;letter-spacing:3px;line-height:1.3}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:3px;color:var(--muted)}.header-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;letter-spacing:.5px;margin-left:auto}.source-dot{width:6px;height:6px;border-radius:100%;background:#698a69}.continue-link{font-size:12px;font-weight:550;border-left:1px solid var(--line);padding-left:24px;min-height:44px;display:flex;gap:12px;align-items:center}
.gallery-page{max-width:1440px;margin:0 auto;padding:56px 28px 24px}.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:45px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.1px;color:#7c8f78;margin:0 0 17px}.gallery-heading h1{font-size:clamp(27px,3.1vw,42px);letter-spacing:-1px;font-weight:550;line-height:1.35;margin:0 0 15px}.title-dot{color:#8f9f7a}.intro{margin:0;color:var(--muted);font-size:14px;letter-spacing:.3px}.collection-note{border-left:1px solid #d5dfd4;padding-left:36px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}.collection-note strong{font-size:52px;font-weight:350;letter-spacing:-2px;color:var(--ink);line-height:1}.collection-note strong span{font-size:13px;font-weight:400;letter-spacing:1px;padding-left:8px}.collection-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-bottom:20px}.collection-bar h2{font-size:15px;letter-spacing:1px;font-weight:600;margin:0}.collection-bar p{color:var(--muted);font-size:12px;margin:0}.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}.style-card{background:var(--white);border:1px solid #e3e7df;border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}.style-card:hover{transform:translateY(-3px);border-color:#9caf9c;box-shadow:0 10px 24px #233f370a}.style-card.was-selected{border-color:#859e81;box-shadow:0 0 0 1px #859e81}.card-photo{position:relative;aspect-ratio:3/2;background:#ffffff;display:grid;place-items:center;border-bottom:1px solid #f0f1ec;overflow:hidden}.card-photo img{height:100%;width:100%;object-fit:contain}.card-number{position:absolute;left:12px;top:12px;font-size:11px;line-height:24px;min-width:28px;text-align:center;background:#ffffff;border:1px solid #e6eae2;border-radius:6px;font-variant-numeric:tabular-nums;color:#697d6b}.card-meta{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.card-meta h3{font-size:14px;font-weight:600;line-height:1.4;margin:0 0 4px}.card-meta p{font-size:11px;color:var(--muted);margin:0}.card-arrow{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:16px;color:#687f66}.card-image-error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted);font-size:12px;background:#f3f5ef}.catalog-status{padding:26px 0;color:var(--muted)}.gallery-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding:18px 0;color:#879187;font-size:11px}.gallery-footer p{margin:0}

body.study-mode{height:100dvh;overflow:hidden}
body.study-mode .app-header{height:64px;padding:0 24px}
body.study-mode .brand-mark{width:34px;height:34px;font-size:17px;border-radius:10px 3px 10px 3px}
body.study-mode .brand strong{font-size:17px}body.study-mode .brand small{font-size:9px;letter-spacing:1.5px}
.study-page{height:calc(100dvh - 64px);display:flex;flex-direction:column;background:#fff;min-height:0}
.study-nav{height:72px;flex:0 0 72px;display:flex;align-items:center;gap:24px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line)}
.back-link{min-height:44px;display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:12px;padding-right:22px;border-right:1px solid var(--line)}
.study-title{display:flex;align-items:center;gap:11px;min-width:0}.style-number{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:9px;background:var(--soft);color:#6e856a;font-size:16px;font-variant-numeric:tabular-nums}
.study-title h1{font-size:17px;font-weight:600;margin:0;line-height:1.35}.study-title p{font-size:10px;color:var(--muted);margin:3px 0 0}
.style-switcher{display:flex;align-items:center;gap:6px;margin-left:auto}.style-switcher select{width:175px;min-height:44px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:#fff;color:var(--ink);font-size:12px}.icon-button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:#fff;font-size:18px}
.landscape-hint{display:none}
.study-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,26vw,340px);flex:1;min-height:0;overflow:hidden}
.learning-sidebar{min-width:0;min-height:0;background:#fff;border-left:1px solid var(--line);padding:18px 18px 24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d8e1d2 transparent}
.panel-section{border-bottom:1px solid #e6eae2;padding-bottom:16px;margin-bottom:16px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.panel-section h2{font-size:13px;font-weight:600;letter-spacing:.5px;margin:0}.small-label{font-size:10px;color:#8b9788}
.learning-sidebar button{min-height:44px;min-width:44px;border:1px solid #dce5d7;border-radius:7px;background:#fff;padding:8px 9px;color:#5e7455;font-size:12px;white-space:nowrap}.learning-sidebar button:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#eef4e8}.learning-sidebar button.active{background:#e6eee0;color:#315b37;border-color:#b7cbb0;font-weight:600}.learning-sidebar button.primary{color:#fff;background:#2f5840;border-color:#2f5840}
.region-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.region-buttons button{font-size:12px}
.piece-count{display:flex;align-items:baseline;gap:7px;position:relative;padding:10px 0 12px;margin:0 0 12px}.piece-count strong{font-weight:450;font-size:32px;line-height:1.1;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:#2c513c}.piece-count>span{font-size:11px;color:#8c9888}.piece-count>.global-count{margin-left:auto;font-size:9px}.piece-progress{position:absolute;bottom:0;height:3px;background:#eef2e9;width:100%;border-radius:5px;overflow:hidden}.piece-progress span{height:100%;width:0;display:block;background:#6c8d60;border-radius:5px;transition:width .2s}
.piece-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.piece-step button{font-size:12px}
.piece-details{margin-top:6px}.piece-details summary,.reference-section>summary{display:flex;justify-content:space-between;gap:8px;min-height:44px;align-items:center;cursor:pointer;list-style:none;font-size:11px;color:#65795a}.reference-section>summary:after{content:'＋';font-size:15px;color:#91a184}.reference-section[open]>summary:after{content:'−'}summary::-webkit-details-marker{display:none}.piece-details summary>span:last-child{font-size:10px;color:#8c9885;display:flex;align-items:center;gap:7px}.piece-details summary>span:last-child:after{content:'＋';font-size:15px}.piece-details[open] summary>span:last-child:after{content:'−'}.piece-presets{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:6px;margin-top:7px}.piece-presets button{font-size:10px;padding:7px 5px;background:#f7f9f3}
.help-text{font-size:10px;line-height:1.7;color:#8b9785;margin:7px 0 0}.region-note{color:#8a8f7c}.piece-list{display:grid;gap:2px;max-height:320px;overflow-y:auto;padding-top:5px}.piece-item{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 5px;border-radius:6px;font-size:11px;color:#62765c;cursor:pointer}.piece-item:hover{background:#f3f7ed}.piece-item input{height:17px;width:17px;accent-color:#426d44;flex-shrink:0}.piece-item .piece-color{width:10px;height:10px;border-radius:3px;flex-shrink:0;border:1px solid #0000000b}.piece-item .piece-name{overflow-wrap:anywhere;flex:1}.piece-item.off{color:#a6afa1}
.view-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.view-buttons button{font-size:11px;padding:8px 3px}.tilt-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}.tilt-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:6px 3px;font-size:11px}.tilt-buttons small{font-size:10px;color:#8d9c81}.tilt-buttons .active small{color:#5b7b4f}
.auto-turn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.auto-turn button{padding:7px 4px;font-size:11px}.quarter-turn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}.quarter-turn button{font-size:11px}.quarter-turn button span{font-size:16px;margin-right:2px}
.snapshot-controls{display:flex;align-items:center;gap:7px;min-width:0}.snapshot-controls select{min-height:44px;width:auto;min-width:0;flex:1;padding:7px 5px;border:1px solid #d4dfd0;border-radius:7px;background:#fff;color:#536d4f;font-size:10px}.learning-sidebar .snapshot-button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #385a48;background:#234c3c;color:#fff;border-radius:7px;padding:8px 10px;white-space:nowrap;font-size:11px;flex-shrink:0}.snapshot-button svg{height:15px;width:15px;stroke:currentColor;stroke-width:1.4;fill:none}.action-status{font-size:10px;line-height:1.7;color:#718667;margin:9px 0 0}.action-status:empty{display:none}
.reference-section>summary .small-label{margin-left:auto}.reference-section:not([open]){padding-bottom:8px;margin-bottom:12px}.reference-photo{display:block;background:#fff;border:1px solid #e8ede3;border-radius:8px;overflow:hidden;margin-top:8px}.reference-photo img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff}.reference-photo>span{display:flex;justify-content:space-between;padding:8px 10px;color:#7e8e74;font-size:10px;border-top:1px solid #eef1e9}.reference-details{margin-top:5px}.reference-details summary{min-height:44px;cursor:pointer;font-size:10px;color:#7c8d72;display:flex;align-items:center;gap:8px}.reference-details summary:before{content:'＋';font-size:14px}.reference-details[open] summary:before{content:'−'}.reference-details img{width:100%;border:1px solid #e6ecdf;border-radius:6px}.display-note,.next-note{font-size:9px;line-height:1.8;color:#99a28f;margin:5px 0 0}
.viewer-column{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 27px;gap:0;padding:14px 18px 10px;background:#fff;overflow:hidden}.square-host{min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;position:relative}.viewer-stage{position:relative;width:var(--stage-size,100%);height:var(--stage-size,100%);max-width:100%;max-height:100%;min-width:0;min-height:0;aspect-ratio:1/1;overflow:hidden;background:#fff}.viewer-stage iframe{width:100%;height:100%;position:absolute;inset:0;border:0;display:block;touch-action:none;background:#fff}.viewer-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#fff;z-index:2}.viewer-overlay strong{font-size:14px;font-weight:550;margin-top:17px}.viewer-overlay p{color:var(--muted);font-size:11px;max-width:310px;line-height:1.8;margin:8px 0 18px}.loader{width:25px;height:25px;border:2px solid #dbe4d7;border-top-color:#5c7b56;border-radius:50%;animation:spin .8s linear infinite}.error-overlay strong{color:#8b5345}.gesture-hint{font-size:10px;color:#98a08f;margin:0;display:flex;align-items:flex-end;justify-content:center;white-space:nowrap}.touch-hint{display:none}.button{min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:9px 18px;color:var(--ink)}.button.primary{background:#2f5840;color:#fff;border-color:#2f5840}
@keyframes spin{to{transform:rotate(360deg)}}
@media(hover:none),(pointer:coarse){.desktop-hint{display:none}.touch-hint{display:inline}.style-card:hover{transform:none;box-shadow:none}}
@media(min-width:1600px){.study-layout{grid-template-columns:minmax(0,1fr) 350px}.learning-sidebar{padding:22px 24px 28px}.viewer-column{padding:18px 24px 12px}}
@media(max-width:1100px){.style-grid{gap:19px 16px}.card-meta{padding:12px}.card-meta h3{font-size:13px}.card-arrow{width:28px;height:28px}.study-nav{padding:0 20px;gap:16px}.back-link{padding-right:16px}.study-title h1{font-size:16px}.style-switcher select{width:145px}}
@media(min-width:781px) and (max-width:1000px){.style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.app-header{height:70px;padding:0 20px;gap:16px}.brand-mark{width:35px;height:35px;border-radius:10px 3px 10px 3px;font-size:18px}.brand{gap:10px}.brand strong{font-size:17px}.brand small{font-size:9px;letter-spacing:1.4px}.header-meta{font-size:10px;gap:6px}.continue-link{padding-left:15px;font-size:11px}.gallery-page{padding:34px 20px 20px}.gallery-heading{gap:20px;margin-bottom:30px;align-items:flex-start}.gallery-heading h1{font-size:29px;letter-spacing:-1px;max-width:330px}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:13px}.intro{font-size:12px;max-width:285px;line-height:1.8}.collection-note{padding-left:20px;margin-top:26px;max-width:130px;font-size:10px;gap:9px}.collection-note strong{font-size:44px}.collection-note strong span{font-size:11px}.style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.card-meta{padding:12px}.card-meta h3{font-size:13px}.card-number{left:9px;top:9px;font-size:10px;line-height:21px;min-width:25px}.gallery-footer{flex-direction:column;gap:5px;margin-top:28px}.collection-bar{padding-top:16px;margin-bottom:17px}.collection-bar p{font-size:11px}}
@media(max-height:600px) and (orientation:landscape){body.study-mode .app-header{height:52px}.study-page{height:calc(100dvh - 52px)}.study-nav{height:58px;flex-basis:58px}.study-title p{display:none}.learning-sidebar{padding-top:12px}.viewer-column{padding-top:8px}}
@media(max-width:699px){body.study-mode{height:auto;overflow:auto}.study-page{height:auto;min-height:calc(100dvh - 64px)}.study-nav{height:auto;min-height:106px;flex:0 0 auto;padding:10px 16px;gap:7px 12px;flex-wrap:wrap}.back-link{border-right:0;padding-right:0;min-height:44px;font-size:11px;order:0}.study-title{order:2;flex:1 1 100%;width:100%;gap:8px}.study-title h1{font-size:16px}.study-title p{display:none}.style-number{height:30px;width:30px;font-size:13px;border-radius:7px}.style-switcher{order:1;margin-left:auto;gap:5px}.style-switcher select{width:135px;min-height:44px;font-size:11px}.icon-button{min-width:44px;min-height:44px;font-size:16px}.landscape-hint{display:block;margin:0;padding:8px 16px;border-bottom:1px solid #edf0e7;color:#96a088;background:#fff;text-align:center;font-size:10px}.study-layout{display:flex;flex-direction:column;overflow:visible;flex:0 0 auto}.viewer-column{order:0;display:grid;grid-template-rows:minmax(0,1fr) 27px;padding:12px 12px 10px;overflow:hidden}.square-host{height:min(calc(100vw - 24px),62dvh)}.learning-sidebar{order:1;overflow:visible;min-height:0;border-left:0;border-top:1px solid var(--line);padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px 22px}.panel-section{margin:0;padding-bottom:17px}.piece-section{grid-column:1;grid-row:1 / span 2}.view-section{grid-column:2;grid-row:1}.rotation-panel{grid-column:2;grid-row:2}.screenshot-section{grid-column:1;grid-row:3}.reference-section{grid-column:2;grid-row:3}.display-note,.next-note{grid-column:1 / -1;margin:0}.next-note{margin-top:-12px}.viewer-overlay strong{font-size:13px}.viewer-overlay p{font-size:10px}.gesture-hint{font-size:9px}.piece-list{max-height:300px}}
@media(max-width:500px){.header-meta{display:none}.continue-link{margin-left:auto;border:0;padding-left:0}.gallery-page{padding:28px 16px 16px}.gallery-heading{display:block;position:relative;padding-right:0;margin-bottom:26px}.gallery-heading h1{font-size:27px;max-width:none}.collection-note{display:none}.intro{max-width:none}.style-grid{gap:15px 11px}.card-meta{padding:10px;gap:6px}.card-meta h3{font-size:12px}.card-meta p{font-size:10px}.card-arrow{height:25px;width:25px;font-size:13px}.collection-bar p{font-size:10px}.gallery-footer{font-size:10px}.study-nav{padding:9px 12px;gap:6px}.style-switcher select{width:122px}.learning-sidebar{display:flex;flex-direction:column;gap:18px;padding:19px 20px 25px}.panel-section{width:100%;padding-bottom:17px}.piece-count{padding-top:12px}.piece-count strong{font-size:36px}.piece-count>.global-count{font-size:10px}.learning-sidebar button{font-size:12px}.view-buttons button{font-size:12px}.tilt-buttons button{font-size:12px}.snapshot-controls select{font-size:11px}.learning-sidebar .snapshot-button{font-size:12px}.snapshot-controls{gap:9px}.reference-section{width:100%}.display-note,.next-note{margin:0}.piece-list{max-height:340px}.landscape-hint{font-size:9px;padding:7px 12px}.action-status{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.loader{animation:none;border-color:#aabca2;border-top-color:#5c7b56}}

.zone-select-label{display:block;font-size:10px;color:#85947a;margin:10px 0 5px}#panelZone{width:100%;min-width:0;min-height:44px;border:1px solid #d4dfd0;border-radius:7px;background:#fff;color:#536d4f;padding:8px 10px;font-size:12px}.piece-name .piece-zone{display:block;font-size:9px;color:#95a08b;margin-top:2px}.learning-sidebar .piece-presets button{font-size:10px;padding:7px 4px}@media(max-width:500px){.learning-sidebar .piece-presets button{font-size:11px}.piece-name .piece-zone{font-size:10px}}
.panel-layout-editor{margin-top:7px;border-top:1px solid #e9eee3}.panel-layout-editor>summary{display:flex;justify-content:space-between;align-items:center;gap:7px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;color:#5f7855}.panel-layout-editor>summary>[data-layout-dirty]{font-size:9px;color:#90a083;flex-shrink:0}.panel-layout-editor.has-draft>summary>[data-layout-dirty]{color:#ad7b3e}.layout-editor-content{padding-top:5px}.layout-editor-intro,.layout-locate-hint,.layout-editor-help,.layout-storage-note{font-size:10px;line-height:1.8;color:#8b9781;margin:0 0 9px}.layout-selection{padding:9px 10px;border:1px solid #dce8d1;border-radius:7px;background:#f4f8ee;font-size:11px;color:#728664;margin-bottom:7px}.layout-selection strong{color:#365e35;font-size:14px;font-weight:600}.layout-locate-hint{font-size:9px;margin-bottom:9px}.layout-editor-feedback,.layout-editor-warning,.layout-editor-validation{font-size:10px;line-height:1.8;overflow-wrap:anywhere}.layout-editor-feedback{color:#678456;margin:8px 0}.layout-editor-feedback:empty,.layout-editor-validation:empty{display:none}.layout-editor-warning{background:#fff8e9;color:#927344;border:1px solid #eadcba;border-radius:6px;padding:8px;margin:8px 0}.layout-editor-validation{color:#a16d49;margin:9px 0}.layout-table-scroll{max-height:286px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #e1e8d9;border-radius:7px;margin:9px 0 7px}.layout-table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:11px}.layout-table th{position:sticky;top:0;z-index:1;background:#f5f8f0;color:#8a9a7d;font-size:10px;font-weight:500;text-align:center;height:32px;padding:5px 3px;border-bottom:1px solid #e2e9db}.layout-table th:first-child{width:56px}.layout-table th:last-child{width:81px}.layout-table td{text-align:center;padding:4px;border-bottom:1px solid #edf0e6;height:53px;color:#718462}.layout-table tr:last-child td{border-bottom:0}.layout-table tr.is-selected td{background:#ecf5e2;color:#345f2f}.layout-table td:first-child{font-weight:600;font-variant-numeric:tabular-nums}.layout-table input{width:100%;min-width:0;min-height:44px;border:1px solid #d9e3d1;border-radius:6px;background:#fff;color:#42673a;text-align:center;padding:6px 3px;font-size:12px;-moz-appearance:textfield}.layout-table input::-webkit-inner-spin-button,.layout-table input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.learning-sidebar .layout-table button{min-height:44px;min-width:44px;padding:7px 5px;font-size:10px;width:100%}.layout-zones-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:17px 0 9px}.layout-zones-heading h3{font-size:12px;font-weight:600;color:#5d7750;margin:0}.learning-sidebar .layout-zones-heading button{font-size:10px;padding:7px 8px}.layout-zones{display:grid;gap:9px;margin-bottom:9px}.layout-zone-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;background:#fafbf7;border:1px solid #e4eadc;border-radius:7px;padding:9px}.layout-zone-row label{display:block;font-size:9px;color:#8a9b7e;min-width:0}.layout-zone-row input{display:block;width:100%;min-height:44px;min-width:0;padding:8px;border:1px solid #dce5d3;border-radius:6px;background:#fff;font-size:11px;color:#5e7952;margin-top:4px}.layout-zone-row .zone-number-field{grid-column:1 / -1}.learning-sidebar .layout-zone-row button{align-self:end;padding:6px 3px;min-width:44px;min-height:44px;font-size:10px;color:#9b8b72}.layout-zones-empty{padding:8px 0;font-size:10px;color:#97a28d;margin:0}.layout-editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}.layout-editor-actions [data-layout-save],.layout-editor-actions [data-layout-reset]{grid-column:1 / -1}.learning-sidebar .layout-editor-actions button{font-size:11px;padding:8px 5px;min-height:44px}.layout-storage-note{font-size:9px;margin:9px 0 5px}.layout-table input:disabled,.layout-zone-row input:disabled{opacity:.5}.layout-editor-content.is-waiting .layout-table-scroll{opacity:.55}@media(max-width:500px){.layout-table th:first-child{width:64px}.layout-table th:last-child{width:91px}.layout-table,.layout-table input{font-size:12px}.learning-sidebar .layout-table button{font-size:11px}.layout-editor-intro,.layout-editor-help,.layout-editor-validation,.layout-editor-feedback{font-size:11px}.layout-zone-row input{font-size:12px}}

.learning-sidebar .layout-clear-zones{width:100%;min-height:44px;font-size:10px;color:#8a8f75;background:#fafbf7;margin:4px 0 5px}

.layout-table th{height:46px;line-height:1.45}.layout-table th small{display:block;font-size:9px;color:#9aa78e;font-weight:400}.layout-table th:first-child{width:72px}.layout-selection strong{display:inline-block}.panel-layout-editor[open]>summary{color:#3f6839}@media(max-width:500px){.layout-table th:first-child{width:76px}}

.portal-nav{display:flex;align-items:center;gap:6px;margin-left:12px;flex-shrink:0}.portal-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:7px 10px;border:1px solid #dce5d7;border-radius:7px;font-size:11px;color:#6b805d;white-space:nowrap}.portal-nav a:hover{background:#f0f5e9}@media(max-width:900px){.header-meta{display:none}.portal-nav{margin-left:auto}}@media(max-width:600px){body:not(.study-mode) .app-header{height:auto;min-height:70px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:6px 12px}.portal-nav{gap:4px;margin-left:auto}.portal-nav a{padding:6px 7px;font-size:10px}body:not(.study-mode) .continue-link{margin-left:auto;min-height:32px;font-size:10px}}


/* Each selection card pairs the human effect with its original 3D structure. */
.style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.style-card{display:flex;flex-direction:column}.card-photo.card-pair{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,var(--person-column,1.5fr)) minmax(0,var(--diagram-column,.75fr));place-items:stretch;align-items:start;gap:4px;padding:9px 6px 0}.card-panel{margin:0;min-width:0}.card-image-frame{width:100%;display:flex;align-items:center;justify-content:center;background:#fff;min-width:0;overflow:hidden}.card-person .card-image-frame{aspect-ratio:var(--person-aspect,1.5)}.card-diagram .card-image-frame{aspect-ratio:var(--diagram-aspect,.75)}.card-image-frame img{width:100%;height:100%;object-fit:contain}.card-caption{font-size:10px;line-height:1.5;min-height:26px;display:flex;align-items:center;justify-content:center;color:#839176;padding:3px 0 5px;white-space:nowrap}.card-meta{padding:12px;flex:1;gap:7px}.card-meta>div{min-width:0;flex:1}.card-title-line{display:flex;align-items:flex-start;gap:6px;min-width:0;margin-bottom:5px}.card-title-line h3{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.card-title-line .card-number{position:static;left:auto;top:auto;min-width:25px;line-height:21px;border-radius:5px;font-size:10px;flex-shrink:0}.card-meta p{font-size:10px;line-height:1.6}.card-arrow{width:25px;height:25px;font-size:13px}.card-image-frame .card-image-error{font-size:9px;padding:6px;text-align:center;line-height:1.6;background:#fff;color:#929c88}@media(max-width:1100px){.style-grid{gap:18px 12px}.card-meta{padding:10px 8px}.card-title-line{gap:4px}.card-title-line h3{font-size:11px}.card-title-line .card-number{min-width:21px;line-height:19px;font-size:9px}.card-meta p{font-size:9px}.card-arrow{display:none}.card-photo.card-pair{gap:3px;padding:8px 4px 0}.card-caption{font-size:9px;min-height:24px}}@media(max-width:699px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 12px}.card-meta{padding:11px 9px}.card-title-line h3{font-size:12px}.card-meta p{font-size:10px}.card-caption{font-size:10px}.collection-bar{align-items:flex-start;gap:10px}.collection-bar p{max-width:180px;line-height:1.7;text-align:right}}

.gallery-heading.book-hero{gap:42px;justify-content:flex-start;margin-bottom:34px;align-items:center}.book-cover-link{display:block;flex:0 0 230px;max-width:230px;aspect-ratio:1;background:#fff;border-radius:10px;overflow:hidden}.book-cover-link img{width:100%;height:100%;object-fit:contain}.book-hero-content{min-width:0;max-width:880px}.book-hero .eyebrow{font-size:13px;letter-spacing:1.5px;color:#718568;margin-bottom:15px}.book-hero h1{font-size:clamp(25px,2.65vw,37px);max-width:none;line-height:1.55;letter-spacing:0;margin-bottom:14px}.book-hero .intro{max-width:720px;line-height:1.9;font-size:13px}.hero-start{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:44px;padding:11px 17px;margin-top:22px;background:#58704e;color:#fff;border:1px solid #58704e;border-radius:7px;font-size:12px}.hero-start:hover{background:#45603d}@media(max-width:1100px){.gallery-heading.book-hero{gap:28px}.book-cover-link{flex-basis:185px;max-width:185px}.book-hero h1{font-size:29px}}@media(max-width:780px){.gallery-heading.book-hero{gap:20px;margin-bottom:29px}.book-cover-link{flex-basis:150px;max-width:150px}.book-hero h1{font-size:25px}.book-hero .eyebrow{font-size:11px}.book-hero .intro{font-size:11px}.hero-start{margin-top:17px}}@media(max-width:699px){.gallery-heading.book-hero{flex-direction:column;align-items:center;gap:16px;text-align:center}.book-cover-link{width:160px;max-width:160px;flex-basis:auto}.book-hero h1{font-size:24px}.book-hero .eyebrow{margin-bottom:10px}.book-hero .intro{font-size:12px}.hero-start{margin-top:17px}}


/* iPad release layout: the existing actions stay reachable beside the model. */
.learning-primary-actions{min-width:0}
.learning-controls{min-width:0;min-height:0}
@media (orientation:landscape) and (min-width:640px){
  body.study-mode{--study-header-height:56px;--study-nav-height:60px;height:100dvh;overflow:hidden;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  body.study-mode .app-header{height:var(--study-header-height);padding:0 20px;gap:18px}
  body.study-mode .study-page{height:calc(100dvh - var(--study-header-height) - env(safe-area-inset-bottom,0px));min-height:0}
  body.study-mode .study-nav{height:var(--study-nav-height);min-height:0;flex:0 0 var(--study-nav-height);padding:0 20px;gap:16px;flex-wrap:nowrap}
  body.study-mode .back-link{order:0;padding-right:14px;border-right:1px solid var(--line);font-size:12px;flex-shrink:0}
  body.study-mode .study-title{order:0;width:auto;flex:1 1 auto;min-width:0}
  body.study-mode .study-title>div{min-width:0}
  body.study-mode .study-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.study-mode .style-switcher{order:0;flex-shrink:0}
  body.study-mode .landscape-hint{display:none}
  body.study-mode .study-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28vw,340px);flex:1;min-height:0;overflow:hidden}
  body.study-mode .viewer-column{order:0;display:grid;grid-template-rows:minmax(0,1fr) 20px;padding:10px 14px 8px;overflow:hidden}
  body.study-mode .square-host{height:auto}
  body.study-mode .learning-sidebar{order:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:0;border-top:0;border-left:1px solid var(--line);overflow:hidden;min-height:0}
  .learning-primary-actions{padding:12px 14px 11px;border-bottom:1px solid var(--line);background:#fff}
  .learning-primary-actions .piece-count{padding:0 0 7px;margin:0 0 8px;min-height:32px}
  .learning-primary-actions .piece-count strong{font-size:26px}
  .learning-primary-actions .piece-step button{min-height:44px}
  .learning-controls{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d8e1d2 transparent;padding:13px 14px 18px}
  .learning-controls>.panel-section{width:100%;margin:0 0 14px;padding-bottom:14px}
  .learning-controls>.display-note,.learning-controls>.next-note{margin:5px 0 0}
  .learning-sidebar>.screenshot-section{grid-column:auto;grid-row:auto;margin:0;padding:10px 14px 12px;border-top:1px solid var(--line);border-bottom:0;background:#fff}
  .learning-sidebar>.screenshot-section .section-heading{margin-bottom:7px}
  .learning-sidebar>.screenshot-section .action-status{max-height:42px;overflow-y:auto}
}
@media (orientation:landscape) and (min-width:640px) and (max-height:500px){
  body.study-mode{--study-header-height:48px;--study-nav-height:52px}
  body.study-mode .app-header{padding:0 12px;gap:12px}
  body.study-mode .brand-mark{width:29px;height:29px;font-size:16px}
  body.study-mode .brand{gap:8px}
  body.study-mode .brand strong{font-size:16px}
  body.study-mode .brand small{font-size:8px;margin-top:1px}
  body.study-mode .header-meta{display:none}
  body.study-mode .portal-nav{margin-left:auto;gap:5px}
  body.study-mode .portal-nav a{min-height:44px;padding:6px 9px;font-size:11px}
  body.study-mode .study-nav{padding:0 12px;gap:10px}
  body.study-mode .back-link{padding-right:10px;font-size:11px}
  body.study-mode .study-title{gap:7px}
  body.study-mode .study-title h1{font-size:14px}
  body.study-mode .study-title p{display:none}
  body.study-mode .style-number{width:29px;height:29px;font-size:13px}
  body.study-mode .style-switcher{gap:4px}
  body.study-mode .style-switcher select{width:clamp(100px,16vw,135px);padding:6px;font-size:11px}
  body.study-mode .study-layout{grid-template-columns:minmax(0,1fr) 300px}
  body.study-mode .viewer-column{grid-template-rows:minmax(0,1fr) 16px;padding:6px 8px 5px}
  body.study-mode .gesture-hint{font-size:9px}
  .learning-primary-actions{padding:8px 10px}
  .learning-primary-actions .piece-count{padding-bottom:5px;margin-bottom:6px;min-height:27px}
  .learning-primary-actions .piece-count strong{font-size:22px}
  .learning-primary-actions .piece-count>.global-count{font-size:9px}
  .learning-controls{padding:10px 10px 14px}
  .learning-sidebar>.screenshot-section{padding:8px 10px}
  .learning-sidebar>.screenshot-section .section-heading{display:none}
}
@media (orientation:portrait),(max-width:639px){
  body.study-mode{height:auto;min-height:100dvh;overflow:auto;padding:0}
  body.study-mode .app-header{height:auto;min-height:64px;padding:8px 12px;gap:8px 12px;flex-wrap:wrap}
  body.study-mode .portal-nav{margin-left:auto}
  body.study-mode .header-meta{display:none}
  body.study-mode .study-page{height:auto;min-height:calc(100dvh - 64px)}
  body.study-mode .study-nav{height:auto;min-height:106px;flex:0 0 auto;padding:10px 12px;gap:6px 10px;flex-wrap:wrap}
  body.study-mode .back-link{order:0;border-right:0;padding-right:0}
  body.study-mode .style-switcher{order:1;margin-left:auto}
  body.study-mode .study-title{order:2;flex:1 1 100%;width:100%;min-width:0}
  body.study-mode .landscape-hint{display:block;margin:0;padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.65;color:var(--muted);text-align:center}
  body.study-mode .study-layout{display:flex;flex-direction:column;overflow:visible;flex:0 0 auto}
  body.study-mode .viewer-column{order:0;display:grid;grid-template-rows:minmax(0,1fr) 24px;padding:12px 12px 8px}
  body.study-mode .square-host{height:min(calc(100vw - 24px),55dvh)}
  body.study-mode .learning-sidebar{order:1;display:flex;flex-direction:column;gap:0;overflow:visible;min-height:0;padding:0;border-left:0;border-top:1px solid var(--line)}
  .learning-primary-actions{width:100%;padding:14px 16px;border-bottom:1px solid var(--line)}
  .learning-primary-actions .piece-count{margin-top:0}
  .learning-controls{width:100%;display:flex;flex-direction:column;gap:0;overflow:visible;padding:16px}
  .learning-controls>.panel-section{width:100%;margin:0 0 18px}
  .learning-controls>.display-note,.learning-controls>.next-note{margin:5px 0 0}
  .learning-sidebar>.screenshot-section{width:100%;margin:0;padding:14px 16px 20px;border-top:1px solid var(--line);border-bottom:0}
}