*{box-sizing:border-box}html,body{margin:0;overflow:hidden;width:100%;height:100%;background:#ececea;color:#242725;font-family:Arial,Helvetica,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #32996f;outline-offset:4px}header{position:absolute;top:0;left:0;width:100%;height:83px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}header>*{pointer-events:auto}.wordmark{font-size:28px;font-weight:900;letter-spacing:-3px;color:#252824;text-decoration:none}.wordmark span{font-size:9px;vertical-align:top;margin:3px 0 0 7px;display:inline-block;letter-spacing:0}.header-center,#sound{font:9px monospace;letter-spacing:1.5px;color:#747a74}.header-center b{font-weight:400;color:#b9bdb6;margin:0 12px}#sound{border:0;background:none;padding:12px 0}#sound span{display:inline-block;margin-left:9px;border:1px solid #cbd0c7;padding:5px 8px;border-radius:3px;font-size:8px}main{position:absolute;inset:0 0 65px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#fff 0,#f2f3ef 35%,#e5e6e1 80%)}#webgl{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}#webgl:active{cursor:grabbing}.left-caption,.right-caption{position:absolute;top:44%;left:5%;pointer-events:none;font:8px monospace;letter-spacing:1.3px;color:#81867d;line-height:1.9}.left-caption strong{display:block;font-family:Arial,sans-serif;font-size:17px;letter-spacing:-.3px;color:#424a41;font-weight:400;margin-top:10px}.left-caption p,.right-caption p{font:11px/1.7 Arial;letter-spacing:0;color:#91968d;margin-top:11px}.dot{background:#5d936a;width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:5px}.right-caption{right:5%;left:auto;top:46%}.swatches{display:flex;gap:5px;margin-top:15px}.swatches i{width:7px;height:7px;border-radius:50%;background:#2187dd}.swatches i:nth-child(2){background:#00b95c}.swatches i:nth-child(3){background:#e83531}.swatches i:nth-child(4){background:#efc426}.view-tools{position:absolute;bottom:26px;left:4%;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #cbd0c6;border-radius:6px;background:#ffffff70;backdrop-filter:blur(8px)}.view-tools button{border:0;background:none;font:9px monospace;padding:9px;color:#838b7f;letter-spacing:.5px;border-radius:3px}.view-tools button.active{background:#d7ddd1;color:#3b4938}.view-tools span{width:1px;height:17px;background:#cdd2c6;margin:0 5px}.view-tools button:nth-last-child(-n+3){font-size:16px;line-height:12px;padding:8px}.hinge-control{position:absolute;right:4%;bottom:34px;width:130px}.hinge-control label{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1px;color:#838b7f}.hinge-control input{width:100%;accent-color:#68836b;height:3px;cursor:pointer;margin:12px 0 0}.drag-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font:8px monospace;letter-spacing:1px;color:#9ba191;white-space:nowrap}.drag-hint span{margin:0 13px}footer{position:absolute;bottom:0;left:4%;right:4%;height:65px;border-top:1px solid #cdd1c7;display:flex;align-items:center;justify-content:space-between;font:8px monospace;letter-spacing:1px;color:#8b9285}footer nav{display:flex;gap:20px}footer nav button{background:none;border:0;padding:8px 0;font:8px monospace;color:#6e7869;letter-spacing:1px}footer nav button.active{color:#25744e}.keys b{font-weight:400;margin-left:15px;color:#465440}#loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;background:#ececea;z-index:2;transition:opacity .4s}#loading.finished{opacity:0;pointer-events:none}.load-icon{font-size:43px;color:#4e7053;animation:pulse 1s infinite}#loading p{font:10px monospace;letter-spacing:3px;margin-top:25px}#loading small{font-size:11px;color:#8b9585}#error{position:absolute;top:40%;left:10%;right:10%;text-align:center}#error h1{font-size:25px}#error p{font-size:13px;color:#788471}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse{50%{opacity:.4}}@media(max-width:1000px){.left-caption,.right-caption{display:none}.header-center{font-size:8px}.drag-hint{display:none}}@media(max-width:600px){header{height:65px;padding:0 6%}.header-center{display:none}main{bottom:90px}.view-tools{bottom:19px;left:5%}.view-tools button{font-size:8px;padding:8px}.hinge-control{right:6%;bottom:27px;width:100px}footer{height:90px;left:6%;right:6%;flex-wrap:wrap;align-content:center;gap:13px}footer nav{order:-1;width:100%;justify-content:space-between;gap:0}footer .keys{margin-left:auto;font-size:7px}footer>span{font-size:7px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#toggle-lid{display:block;margin:10px 0 0 auto;padding:5px 10px;border:1px solid #cbd0c6;border-radius:4px;background:#ffffff80;color:#64705e;font:8px monospace;letter-spacing:1px}.hinge-control{bottom:22px}
#edit-toggle{border:1px solid #b8c5b5;border-radius:4px;background:#eef3e9;color:#456743;font:9px monospace;letter-spacing:1px;padding:9px 12px;margin-left:auto;margin-right:24px}.editor-open main{right:330px}.editor-open .header-center{display:none}.editor-open header{padding-right:355px}#parts-editor[hidden]{display:none}#parts-editor{position:absolute;right:0;top:0;bottom:65px;width:330px;padding:22px;background:#f4f5f0;border-left:1px solid #c6cfc0;overflow-y:auto;z-index:10;box-shadow:-8px 0 30px #1b32200a;font-size:12px}#parts-editor h2{font-size:22px;letter-spacing:-.7px;margin:5px 0 0;font-weight:500}#parts-editor h3{font:10px monospace;letter-spacing:1px;text-transform:uppercase;margin:24px 0 10px;color:#63715d}#parts-editor p{font-size:11px;line-height:1.6;color:#7b8674}#parts-editor small{font:8px monospace;letter-spacing:1.3px;color:#819276}.edit-heading{display:flex;justify-content:space-between;align-items:center}#parts-editor button{border:1px solid #ccd4c5;border-radius:5px;background:#fffdf7;padding:9px 10px;font:10px monospace;text-align:left;color:#4a6042}#parts-editor button:hover{background:#e9efdf}#parts-editor button.selected{background:#d8ebd0;border-color:#84ac77}#parts-editor button:disabled{opacity:.4;cursor:default}#close-editor{font-size:22px!important;background:none!important;padding:0 8px!important}.editor-label{display:grid;gap:8px;margin-top:18px;font:9px monospace;color:#67785e}.editor-label select{padding:9px;border:1px solid #ccd4c5;border-radius:4px;background:#fffdf7;color:#495c42}.part-palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.part-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.part-fields label{display:grid;gap:5px;font-size:10px;color:#788670}.part-fields input{width:100%;border:1px solid #c8d1bf;border-radius:4px;padding:8px;background:#fffdf7;color:#3e5538}.edit-row{display:flex;gap:8px;margin-top:12px}#delete-part{color:#98534a!important}#part-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:180px;overflow:auto}#part-list button{font-size:9px;padding:7px}.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:22px}#save-edit{background:#d8ebd0!important}#edit-status{font-size:10px!important;border-top:1px solid #d8dfd1;padding-top:12px}@media(max-width:750px){.editor-open main{right:0;bottom:43%}#parts-editor{top:57%;bottom:0;left:0;width:100%;border-top:1px solid #c6cfc0;padding:16px}.editor-open footer{display:none}.editor-open header{padding-right:20px}#parts-editor h3{margin-top:16px}.editor-open .hinge-control{display:none}.editor-open .view-tools{bottom:10px}.editor-open #edit-toggle{margin-right:8px}.editor-open #sound{display:none}}

/* Frosted hinge dial and right-aligned camera controls. */
.view-tools{left:auto;right:4%}
.hinge-control{left:auto;right:4%;bottom:80px;width:auto;display:flex;align-items:center;gap:14px;user-select:none}
.hinge-readout{display:grid;gap:6px;min-width:48px;text-align:right;color:#838b7f;font:8px monospace;letter-spacing:1px}
.hinge-readout output{font:18px monospace;letter-spacing:-1px;color:#53634f;font-variant-numeric:tabular-nums}
.hinge-dial{--dial-turn:70deg;width:68px;height:68px;padding:7px;border:1px solid #c2cbbd;border-radius:50%;background:#ffffff70;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 3px 12px #33452b0b,inset 0 1px 1px #fff;cursor:ns-resize;touch-action:none}
.dial-face{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:1px solid #c7cebf;background:repeating-conic-gradient(from 0deg,#a7b39e80 0deg 2deg,transparent 2deg 15deg);box-shadow:inset 0 0 0 6px #eef1e9b0}
.dial-face::before{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(145deg,#ffffffdc,#dce3d4b0);border:1px solid #fff9}
.dial-face i{position:absolute;inset:3px;transform:rotate(var(--dial-turn));z-index:1}.dial-face i::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:8px;border-radius:2px;background:#698563}
.dial-face b{position:relative;font:18px monospace;font-weight:400;color:#8a9781}
.hinge-dial:hover,.hinge-dial.dragging{background:#ffffffa0;border-color:#9eaf96}.hinge-dial.dragging .dial-face{box-shadow:inset 0 0 0 6px #dce5d5b0}
.hinge-actions{display:grid;gap:5px}.hinge-actions button{border:1px solid #cbd0c6;border-radius:4px;background:#ffffff70;backdrop-filter:blur(8px);padding:7px 10px;color:#64705e;font:8px monospace;letter-spacing:1px}.hinge-actions button:hover,.hinge-actions button[aria-pressed=true]{background:#dce5d5;color:#43593c;border-color:#b5c4ac}
.drag-hint{bottom:30px}
@media(max-width:600px){.view-tools{left:auto;right:5%;bottom:20px;gap:2px}.view-tools button{padding:7px 5px}.view-tools span{margin:0 2px}.view-tools button:nth-last-child(-n+3){padding:6px}.hinge-control{left:auto;right:5%;bottom:73px;gap:10px}.hinge-dial{width:60px;height:60px}.hinge-readout output{font-size:16px}}
.content-tools{position:absolute;left:4%;bottom:26px;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #cbd0c6;border-radius:6px;background:#ffffff90;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#64705e;font:9px monospace;letter-spacing:.4px}.content-tools button{padding:9px 10px;background:transparent;border:0;border-radius:3px;font:9px monospace;color:#53654d}.content-tools button:hover{background:#dce5d5}.content-tools button:disabled{opacity:.35;cursor:default}.content-tools span{min-width:88px;text-align:center}.content-tools #content-read{background:#dce5d5}.drag-hint{bottom:8px;font-size:7px}.editor-open .content-tools{display:none}
#portfolio-reader{position:fixed;inset:0;width:min(1120px,94vw);height:min(820px,90vh);max-height:90vh;max-width:94vw;padding:0;border:1px solid #c6d0bd;border-radius:20px;background:#f4f5f0;color:#35432f;box-shadow:0 24px 100px #1e2e2640;overflow:hidden}#portfolio-reader::backdrop{background:#18291e70;backdrop-filter:blur(12px)}.reader-shell{height:100%;display:flex;flex-direction:column}.reader-header{position:static;height:70px;min-height:70px;padding:0 30px;display:flex;border-bottom:1px solid #d8dfd0;pointer-events:auto}.reader-brand{font:11px monospace;letter-spacing:1px;color:#61735a;text-decoration:none}.reader-header button{font:30px Arial;border:0;background:none;color:#61735a;padding:5px 10px}.reader-tabs{display:flex;gap:10px;padding:15px 25px;border-bottom:1px solid #d8dfd0;flex-shrink:0}.reader-tabs button{font:10px monospace;letter-spacing:1px;text-transform:uppercase;padding:11px 16px;border:1px solid transparent;border-radius:7px;background:none;color:#6b7a63}.reader-tabs button[aria-pressed=true]{background:#e0e9d9;border-color:#c3d1b9;color:#395331}.reader-layout{display:grid;grid-template-columns:245px 1fr;flex:1;min-height:0}.reader-list{overflow-y:auto;border-right:1px solid #d8dfd0;padding:20px 12px}.reader-list button{display:block;width:100%;margin:0 0 7px;border:1px solid transparent;background:transparent;text-align:left;font:12px/1.6 Arial;color:#74806c;padding:12px;border-radius:8px}.reader-list button[aria-current=page]{background:#e5ecdF;border-color:#d0ddc8;color:#35502e}.reader-list button:hover{background:#e9eee4}#reader-article{overflow-y:auto;padding:30px 38px 45px;overscroll-behavior:contain;scrollbar-color:#b6c5ab transparent}#reader-article h1{font:500 clamp(24px,3vw,38px)/1.15 Arial;letter-spacing:-1px;color:#2f412b;margin:0 0 25px}#reader-article p{font:14px/1.85 Arial;color:#697761;margin:0 0 17px}#reader-article .reader-eyebrow{font:9px monospace;letter-spacing:1.8px;color:#87947d;margin-bottom:14px}.reader-links{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}.reader-links a{font:11px/1.5 monospace;text-decoration:none;padding:12px 15px;border-radius:6px;background:#e0e9d9;border:1px solid #c3d1b9;color:#3d5833}.reader-links a:hover{background:#d3e2c8}.reader-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:25px}.reader-gallery figure{margin:0;min-width:0}.reader-gallery figure:first-child{grid-column:1/-1}.reader-gallery img{width:100%;max-height:420px;object-fit:contain;display:block;border-radius:10px;background:#e6eae0}.reader-gallery figcaption{font:9px/1.6 monospace;color:#87947d;margin-top:7px}.reader-pager{padding:14px 25px;border-top:1px solid #d8dfd0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font:10px monospace;color:#7a8a6f}.reader-pager button{border:1px solid #cbd4c4;border-radius:5px;padding:10px 14px;background:#fff8;color:#5e7453;font:10px monospace}.reader-pager button:disabled{opacity:.3;cursor:default}
@media(max-width:1000px){.content-tools{bottom:26px}.content-tools #content-library{display:none}}@media(max-width:600px){.content-tools{left:5%;right:5%;bottom:148px;justify-content:center;gap:2px}.content-tools button{padding:9px 7px;font-size:8px}.content-tools span{font-size:8px;min-width:72px}.drag-hint{display:none}.reader-header{padding:0 18px;min-height:56px;height:56px}.reader-tabs{gap:3px;padding:10px;justify-content:space-between}.reader-tabs button{font-size:8px;padding:9px 7px}.reader-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.reader-list{display:flex;gap:5px;max-height:80px;padding:8px;border-right:0;border-bottom:1px solid #d8dfd0;overflow-x:auto;overflow-y:hidden}.reader-list button{min-width:150px;width:150px;font-size:10px;line-height:1.4;margin:0;padding:8px}#reader-article{padding:22px 20px 35px}.reader-gallery{gap:12px}.reader-pager{padding:12px}.reader-pager button{font-size:9px}.reader-header .reader-brand{font-size:9px}}

.content-scroll-hint{color:#7b8d71;padding:0 8px;font-size:8px}.reader-entry{padding:12px 0 36px;margin-bottom:32px;border-bottom:1px solid #d8dfd0}.reader-entry h2{font:500 clamp(22px,2.5vw,32px)/1.2 Arial;letter-spacing:-.6px;margin:0 0 22px;color:#2f412b}

#edit-toggle[hidden]{display:none}#sound{margin-left:auto}

#portfolio-reader{opacity:0;transform:translateY(8px) scale(.99);transition:opacity 200ms ease,transform 200ms ease}
#portfolio-reader.reader-visible{opacity:1;transform:translateY(0) scale(1)}
#portfolio-reader::backdrop{background:#18291e00;backdrop-filter:blur(0);transition:background-color 200ms ease,backdrop-filter 200ms ease}
#portfolio-reader.reader-visible::backdrop{background:#18291e70;backdrop-filter:blur(12px)}
#portfolio-reader.reader-closing{pointer-events:none}
@media(prefers-reduced-motion:reduce){#portfolio-reader{transform:none;transition:none}#portfolio-reader::backdrop{transition:none}}