:root{font-family:'Microsoft JhengHei','Segoe UI',sans-serif;color:#263a39;background:#f5f4ef;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,.file-button{cursor:pointer}button{background:#fff;border:1px solid #d5dcd6;border-radius:6px;padding:8px 12px;color:inherit}button:hover{border-color:#547c6c;background:#edf2ed}button:disabled{opacity:.4;cursor:default}header{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce1d9;background:#fff}.brand{display:flex;gap:13px;align-items:center}.mark{font-family:Georgia;font-size:30px;background:#244f43;color:#fff;padding:6px 14px;border-radius:3px}.brand strong{font-size:17px;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:#81908b}.head-right{display:flex;gap:10px;align-items:center}.badge{color:#8c6e35;background:#f5eddc;font-size:11px;padding:5px 9px;border-radius:4px}main{display:grid;grid-template-columns:240px minmax(300px,1fr) 330px;height:calc(100vh - 76px)}aside{overflow:auto;background:#fbfcf9;padding:24px 20px}.left{border-right:1px solid #dce1d9}.right{border-left:1px solid #dce1d9}.eyebrow{font-size:10px;color:#6e8b7b;letter-spacing:1.7px;font-weight:700}h2{font-size:26px;font-weight:500;line-height:1.6;margin:18px 0}p{line-height:1.7}.muted{color:#75827b;font-size:12px}.tiny{font-size:10px;color:#8b938d;line-height:1.6}label{display:block;font-size:11px;margin:16px 0 6px;color:#64786c}input,select{border:1px solid #d6ddd5;background:white;border-radius:5px;padding:9px;width:100%;color:#35483e}select{margin-top:7px}.check{display:flex;align-items:center;gap:7px}.check input{width:auto;accent-color:#315c4b}.label-line{display:flex;align-items:center;gap:5px;margin-top:20px;font-size:11px}.label-line button{padding:4px 7px;font-size:10px}#floors{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;max-height:260px;overflow:auto;margin-top:8px}#floors label{font-size:10px;margin:5px 0;display:flex;gap:4px;align-items:center}#floors input{width:auto;accent-color:#315c4b}.views{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}.wide{width:100%;margin-top:8px}.primary{background:#2c5a48;color:#fff;border-color:#2c5a48}.primary:hover{background:#1c4435;color:white}#viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#f0f1eb,#e0e5db)}canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-title{position:absolute;top:27px;left:30px;pointer-events:none}h1{font-size:19px;font-weight:400;letter-spacing:1px;margin-top:9px;color:#667c6f}.viewport-bottom{position:absolute;bottom:18px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:10px;color:#748578;pointer-events:none}#loading{position:absolute;bottom:48px;left:24px;background:#ffffffdf;padding:10px 14px;border-radius:5px;display:flex;align-items:center;gap:10px;font-size:11px;pointer-events:none}.spinner{height:12px;width:12px;border:2px solid #d0dbd2;border-top-color:#28563e;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}#empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#8a958b}.tabs{display:flex;border-bottom:1px solid #d9dfd7;margin:14px 0}.tabs button{flex:1;border:0;border-radius:0;background:transparent;color:#929c94}.tabs .active{border-bottom:2px solid #315e48;color:#315e48}#selection{background:#eef2eb;padding:13px;border-radius:6px;font-size:11px;word-break:break-word}#selection p{margin-bottom:0}#selection small{display:block;font-size:9px;color:#7a8c7d;margin-top:6px}#search{margin-top:12px}.categories{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}.categories button{font-size:10px;padding:5px 9px}.categories .active{background:#305944;color:#fff}#material-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:35vh;overflow:auto;padding:2px}.card{padding:0;overflow:hidden;text-align:left;background:white;position:relative}.card.selected{outline:2px solid #36624b}.card img{width:100%;height:78px;object-fit:cover;display:block}.card b{display:block;padding:7px 8px 2px;font-size:11px}.card span{font-size:9px;color:#7c887d;display:block;padding:0 8px 8px}.card em{position:absolute;right:4px;top:4px;background:#fff9;padding:2px 4px;font-size:8px;font-style:normal}#material-detail{font-size:10px;color:#788679;line-height:1.6;margin-top:13px;word-break:break-word}.scale{display:flex;gap:10px}.scale label{width:50%;margin-top:8px}.scale input{margin-top:5px}footer{font-size:10px;color:#919a8e;line-height:1.7;border-top:1px solid #e0e5da;margin-top:24px;padding-top:14px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#244b3a;color:white;border-radius:8px;padding:12px 22px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;max-width:80vw}#toast.show{opacity:1}.scheme{display:flex;gap:5px;margin:10px 0}.scheme button:first-child{flex:1;text-align:left}.file-button{display:block;text-align:center;border:1px solid #d5dcd6;padding:9px;border-radius:5px;color:#35483e}.presentation main{grid-template-columns:1fr}.presentation aside{display:none}@media(max-width:1050px){main{grid-template-columns:190px minmax(250px,1fr) 280px}aside{padding:18px 13px}h2{font-size:21px}h1{font-size:15px}}@media(max-width:760px){header{padding:0 12px;height:65px}.brand small{display:none}.brand strong{font-size:13px}.head-right .badge{display:none}.head-right button{font-size:10px;padding:7px}main{height:auto;grid-template-columns:1fr}.left{order:2;max-height:300px}.right{order:3}#viewport{height:60vh;order:1}#material-grid{grid-template-columns:repeat(3,1fr)}.presentation main{height:calc(100vh - 65px)}.presentation #viewport{height:100%}.viewport-bottom{font-size:8px}}
.segmented{display:flex;gap:5px}.segmented button{flex:1;padding:9px 5px;font-size:11px}.segmented button.active,#floors button.active{background:#2b5a48;color:#fff;border-color:#2b5a48;box-shadow:inset 0 0 0 1px #2b5a48}#floors{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:330px;padding:2px 1px 5px}#floors button{font-size:10px;padding:8px 4px;border-radius:5px;text-align:center;min-height:32px}.section-rule{border-top:1px solid #dce3d9;margin:22px 0 18px}input[type=range]{padding:0;margin-top:9px;accent-color:#2b5a48;border:0;background:transparent}output{float:right;color:#315e48;font-weight:bold}.neighbor-control{display:flex;align-items:center;gap:10px;font-size:10px}.neighbor-control input{max-width:70px;padding:6px}#selected-count{background:#e8f1e8;color:#315d46;padding:7px 9px;border-radius:4px}#drawing-status{color:#7c6334}a{color:#315e48}.viewport-title h1{color:#526c5b}.viewport-bottom{color:#465d4c}

header{gap:16px}.brand{min-width:0}.brand>div{min-width:0}.brand strong{display:block;letter-spacing:1px;line-height:1.4}.head-right{flex-shrink:0}@media(max-width:760px){.brand .mark{display:none}.brand strong{font-size:12px;letter-spacing:0}.head-right{gap:4px}}

.roof-corners{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0}.roof-corners button{font-size:10px;padding:7px 2px}

.material-disclaimer{position:absolute;z-index:2;left:22px;right:22px;bottom:38px;margin:0;padding:7px 10px;background:rgba(255,255,255,.92);border-radius:4px;color:#35483e;font-size:12px;line-height:1.6;pointer-events:none}#loading{bottom:100px}@media(max-width:760px){.material-disclaimer{left:12px;right:12px;bottom:35px;font-size:11px}}

.audience-control{display:flex;align-items:center;gap:7px;margin:0;font-size:11px;white-space:nowrap}.audience-control select{width:auto;margin:0;padding:7px 9px}.engineering-review{margin-top:22px;border:1px solid #d5dcd6;border-radius:6px;background:#fff}.engineering-review summary{cursor:pointer;padding:11px 10px;font-size:12px;font-weight:600;color:#315e48;line-height:1.5}.engineering-review[open] summary{border-bottom:1px solid #dce3d9}.review-content{padding:0 10px 10px}.review-content .tiny{overflow-wrap:anywhere}.review-content #drawing-defaults{font-size:11px}@media(max-width:1050px){.audience-control{font-size:0}.audience-control select{font-size:11px}}@media(max-width:760px){header{gap:5px}.head-right{gap:4px}.audience-control select{max-width:105px;padding:6px 4px;font-size:10px}.brand strong{font-size:11px}.head-right button{padding:6px 4px}}

@media(max-width:520px){header{height:96px;flex-wrap:wrap;align-content:center;gap:6px;padding:8px 12px}.brand{flex-basis:100%}.head-right{width:100%;justify-content:flex-end}.presentation main{height:calc(100vh - 96px)}}

/* Catalog thumbnail approximation of the M3 display adjustment. */
.card img.m3-whitened{filter:brightness(1.18) saturate(.7)}
#viewport canvas:focus-visible{outline:2px solid #d0a04f;outline-offset:-2px}

.card img.br310-lighter{filter:brightness(1.35)}

/* BR310 user-confirmed option C, exact sRGB thumbnail. */
.card img.br310-lighter{filter:none;background:#7E858D;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cpath fill='%237E858D' d='M0 0h200v100H0z'/%3E%3C/svg%3E")}