*{box-sizing:border-box}body{margin:0;background:#edf0f3;color:#20282e;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif}a{color:inherit;text-decoration:none}header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ccd3da;background:#f7f9fa;font-size:12px}header>a:first-child{font-weight:bold;font-size:16px}header>span{font-size:8px;letter-spacing:2px;color:#6c7d8d}main{height:calc(100svh - 68px);min-height:560px;position:relative;overflow:hidden}#canvas{position:absolute;inset:0}canvas{display:block;touch-action:none;width:100%;height:100%}.intro{position:absolute;top:30px;left:36px;pointer-events:none}.intro>p{font-size:8px;color:#6d8197;letter-spacing:2px}.intro h1{font-size:clamp(22px,2.9vw,40px);font-weight:500;line-height:1.65;letter-spacing:-1px;margin:15px 0 10px}.intro>span{font-size:11px;color:#72808e}.bottom{position:absolute;bottom:25px;left:36px;right:30px;display:flex;align-items:end;justify-content:space-between;gap:20px}.bottom>p{font-size:10px;line-height:1.9;color:#6f7f8e;margin:0}.bottom small{font-size:7px;letter-spacing:1.6px}nav{display:flex;gap:6px}button{cursor:pointer;border:1px solid #bac7d2;background:#f8fafbd9;color:#354c62;border-radius:4px;padding:12px 15px;font:11px inherit;backdrop-filter:blur(10px)}button:hover,button[aria-pressed=true]{background:#dce7f6;border-color:#7996ba}#loading{position:absolute;inset:0;display:grid;place-content:center;background:#edf0f3;font-size:13px;z-index:5}#loading[hidden],#reference[hidden]{display:none}#reference{position:absolute;right:25px;top:25px;width:min(540px,80%);padding:8px;background:#fff;box-shadow:0 15px 70px #13283a40;border-radius:6px;z-index:6}#reference img{width:100%;display:block}#reference p{font-size:9px;margin:12px;color:#6f7f8e;line-height:1.8}#close-photo{position:absolute;right:12px;top:12px;padding:5px 10px;font-size:20px}@media(max-width:650px){header{height:58px;padding:0 18px;font-size:10px}header>span{display:none}main{height:calc(100svh - 58px);min-height:660px}.intro{left:20px;top:20px}.intro h1{font-size:25px;line-height:1.5}.intro>span{font-size:9px}.bottom{left:18px;right:18px;bottom:20px;display:block}.bottom>p{font-size:8px;margin-bottom:14px}nav{flex-wrap:wrap}button{font-size:10px;padding:10px 12px}}

/* Keep the work in focus, with compact controls. */
.intro h1{font-size:clamp(21px,2.5vw,34px)}nav{flex-wrap:wrap;justify-content:flex-end}.bottom{pointer-events:none}.bottom nav{pointer-events:auto}button{font-family:inherit;font-size:11px;padding:11px 13px}@media(max-width:650px){nav{justify-content:flex-start}.intro h1{font-size:24px}.bottom>p{font-size:8px}button{font-size:10px;padding:9px 10px}}

#operation-status{display:inline-flex;align-items:center;gap:7px;color:#3e596e;font-size:11px;margin-bottom:7px}#operation-status:before{content:"";width:5px;height:5px;border-radius:50%;background:#5c93ae;box-shadow:0 0 8px #659baf55}

.workpiece-badge{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #c8d2dc;border-radius:3px;background:#f7f9facc;backdrop-filter:blur(8px);font-size:10px;color:#52697e;letter-spacing:.4px}.workpiece-badge i{height:5px;width:5px;border-radius:50%;background:#7395ad}

.intro .workpiece-badge{display:flex;width:max-content;max-width:100%;margin-top:17px}

/* Presentation mode inside the homepage. */
html.embedded,html.embedded body{height:100%;background:#f8f9f5;color-scheme:light}html.embedded header,html.embedded .intro,html.embedded .bottom,html.embedded #reference{display:none!important}html.embedded main{height:100svh;min-height:0}html.embedded #loading{background:#f8f9f5;font-size:11px;color:#728091}html.embedded canvas{touch-action:pan-y}

html.embedded,html.embedded body{background:transparent!important}
