/* A tactile website workshop; scoped to website collections. */
.web-collection-page{--coral:#f25f48;--draft:#eeeade;--blue:#273e65}
.web-collection-page .collection-intro{padding:26px 0 0}.web-collection-page .collection-intro .back{margin-bottom:12px}.web-collection-page .title-row{align-items:center;gap:12px}.web-collection-page .title-row h1{font:500 14px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.web-collection-page .count{margin:0;padding:3px 8px;border-radius:3px;font:11px/1.5 ui-monospace,monospace}.web-collection-page .collection-intro>p{display:none}
.assembly-studio{display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:3%;position:relative;min-height:600px;padding:44px 0 60px;isolation:isolate}
.assembly-copy{min-width:0;position:relative;z-index:2}.assembly-kicker{display:flex;align-items:center;gap:8px;color:#666b5f;font:9px/1.6 ui-monospace,monospace;letter-spacing:1.3px;margin-bottom:28px}.assembly-kicker>span{font-size:25px;color:var(--coral);line-height:1}
.assembly-copy h2{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(48px,5.1vw,78px);font-weight:850;letter-spacing:-.075em;line-height:1.02}.assembly-copy h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:500;color:var(--coral);letter-spacing:-.065em;font-size:1.08em}.assembly-copy h2>span,.assembly-copy h2>em{white-space:nowrap}.assembly-lead{max-width:390px;font-size:15px;line-height:1.85;color:#64695e;margin:28px 0}.assembly-actions{display:flex;flex-wrap:wrap;align-items:center;gap:19px}.assembly-next{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 20px;min-height:54px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:700 11px/1.5 ui-monospace,'Apple SD Gothic Neo',sans-serif;box-shadow:4px 4px 0 #b1b7a2;cursor:pointer;transition:transform .15s,box-shadow .15s}.assembly-next:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 #b1b7a2}.assembly-next:active{transform:translate(3px,3px);box-shadow:0 0 0 #b1b7a2}.assembly-next>span:first-child{font-size:23px}.assembly-next>span:last-child{font-size:18px}.assembly-motion{min-height:44px;background:none;padding:8px 0;border:0;border-bottom:1px solid #a8ac9d;font-size:11px;color:#666d5c;cursor:pointer}.assembly-instruction{font-size:10px;line-height:1.6;color:#666b5e;margin:18px 0}.assembly-progress{display:flex;align-items:center;gap:12px;max-width:430px;margin-top:27px;padding-top:16px;border-top:1px solid #d4d5c9}.assembly-count{white-space:nowrap;color:var(--coral);font:600 12px/1.5 ui-monospace,monospace}.assembly-status{font-size:11px;line-height:1.5;color:#606755}
.assembly-stage{height:560px;position:relative;min-width:0;background-image:linear-gradient(#a2ab9325 1px,transparent 1px),linear-gradient(90deg,#a2ab9325 1px,transparent 1px);background-size:24px 24px;border:1px solid #d7d8cc;border-radius:8px;isolation:isolate}.draft-label{position:absolute;top:14px;left:17px;right:17px;display:flex;justify-content:space-between;color:#747c67;font:8px/1.5 ui-monospace,monospace;letter-spacing:1px}.draft-label>span{font-size:15px}
.assembly-browser{position:absolute;right:18px;top:70px;width:73%;height:320px;background:#fcfaf5;border:1px solid #9ba58a;box-shadow:8px 10px 0 #a4b18b36;border-radius:6px;transform:rotate(2deg);transition:transform .6s}.assembly-browser-bar{height:31px;border-bottom:1px solid #d9decf;display:flex;align-items:center;gap:9px;padding:0 10px;color:#6c7760;font:7px/1 ui-monospace,monospace;white-space:nowrap}.assembly-dots{display:flex;gap:4px}.assembly-dots i{height:5px;width:5px;border-radius:50%;background:#bdc7ac}.assembly-dots i:first-child{background:#f37c68}.browser-check{margin-left:auto;font-size:12px}.assembly-canvas{position:relative;height:calc(100% - 31px);margin:0 13px}.canvas-cross{position:absolute;z-index:0;font:16px/1 ui-monospace;color:#c3c9b7}.cross-one{top:35px;left:35px}.cross-two{bottom:35px;right:35px}
.web-piece{position:absolute;box-shadow:4px 5px 0 #192e2826;transition:transform .7s cubic-bezier(.2,.7,.25,1),box-shadow .5s,opacity .4s;transform-origin:center;will-change:transform;border:1px solid #192e2830;z-index:1;pointer-events:none}.piece-number{font:6px/1.5 ui-monospace,monospace;letter-spacing:.5px;display:block}.piece-layout{top:15px;left:0;width:100%;height:55px;background:#dce3f0;padding:9px 11px;color:var(--blue);transform:translate(-30px,-35px) rotate(-9deg)}.piece-layout strong{font:900 clamp(10px,1vw,15px)/1.4 Arial,sans-serif;letter-spacing:-.5px;display:block;margin-top:3px}.mini-nav{position:absolute;right:10px;top:12px;font:5px/1.4 ui-monospace,monospace}.piece-image{top:80px;left:0;width:56%;height:134px;background:#dce2bd;transform:translate(-34px,25px) rotate(-8deg);overflow:hidden}.piece-image img{width:100%;height:100%;object-fit:cover;object-position:55% 25%}.piece-image>span{position:absolute;bottom:0;left:0;right:0;background:#1f2b21ce;color:#fff;font:5px/1.5 ui-monospace,monospace;padding:5px}.piece-type{right:0;top:80px;width:39%;height:134px;background:#f2ccc0;color:#54352b;padding:10px;transform:translate(24px,-12px) rotate(9deg)}.piece-type strong{display:block;font-size:23px;font-weight:700;line-height:1;letter-spacing:-1.1px;margin-top:8px}.piece-type p{font-size:7px;line-height:1.5;margin:8px 0 0}.piece-code{left:0;top:225px;width:100%;height:41px;background:#d5ef90;color:#304028;display:flex;align-items:center;justify-content:space-between;padding:0 11px;transform:translate(27px,37px) rotate(-5deg)}.piece-code>span{font:700 18px/1 ui-monospace,monospace}.piece-code strong{font:700 6px/1.4 ui-monospace,monospace;letter-spacing:.4px}.web-piece.is-placed{transform:translate(0,0) rotate(0deg);box-shadow:0 0 0 #0000}
.assembly-maker{position:absolute;width:45%;height:auto;max-height:470px;object-fit:contain;bottom:8px;left:-5%;pointer-events:none;z-index:3;filter:drop-shadow(3px 8px 8px #2b31241c);animation:maker-breathe 7s ease-in-out infinite;transform-origin:bottom center}.assembly-sticky{position:absolute;right:-12px;top:27px;padding:10px 16px;background:#eced9a;color:#4e572c;font:800 10px/1.3 ui-monospace,'Apple SD Gothic Neo',sans-serif;transform:rotate(8deg);z-index:4;box-shadow:2px 3px 0 #5861411c}.assembly-sticky svg{display:block;width:55px;height:20px;margin-top:4px}.assembly-pieces{position:absolute;bottom:47px;right:17px;left:37%;display:grid;grid-template-columns:1fr 1fr;gap:7px;z-index:5}.assembly-pieces button{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 8px;border:1px solid #aeb79e;background:#f8f8f0;color:#47523c;box-shadow:2px 3px 0 #89956e25;font-size:9px;text-align:left;cursor:pointer;transition:background .2s,transform .2s}.assembly-pieces button:hover{transform:translateY(-2px)}.assembly-pieces button[aria-pressed=true]{background:#e0ecc4;border-color:#829b55}.piece-tick{margin-left:auto;color:#6b8150;font-size:14px}.piece-swatch{width:23px;height:23px;display:grid;place-items:center;font:700 10px/1 ui-monospace,monospace;border:1px solid #3343291c}.swatch-layout{background:#dce3f0;color:#273e65}.swatch-image{background:#dce2bd}.swatch-type{background:#f2ccc0}.swatch-code{background:#d5ef90}.assembly-caption{position:absolute;bottom:15px;right:17px;left:37%;font:7px/1.6 ui-monospace,'Apple SD Gothic Neo',sans-serif;color:#737b66}.assembly-ready{position:absolute;bottom:6px;right:2px;opacity:0;transform:rotate(-12deg) scale(.8);border:2px solid #e8644c;border-radius:4px;padding:7px;color:#db5d46;font:900 13px/1.2 ui-monospace,'Apple SD Gothic Neo',sans-serif;z-index:4;pointer-events:none}.assembly-ready>span{font-size:15px}.assembly-studio.is-complete .assembly-browser{transform:rotate(0)}.assembly-studio.is-complete .browser-check{color:#62813c}.assembly-studio.is-complete .assembly-ready{opacity:1;transform:rotate(-8deg) scale(1);transition:opacity .3s,transform .4s cubic-bezier(.2,1.8,.4,1)}.assembly-studio.has-piece .assembly-sticky{animation:sticky-nod .7s ease-out}
.assembly-divider{display:flex;justify-content:space-between;gap:12px;padding:17px 0;margin:0 0 25px;border-top:1px solid #bec5b0;border-bottom:1px solid #bec5b0;font:9px/1.6 ui-monospace,'Apple SD Gothic Neo',sans-serif;letter-spacing:1px;color:#68765b}.assembly-divider>span:last-child{font-size:7px;letter-spacing:.6px}.web-collection-page .b2b-notice{padding:20px 24px;margin-bottom:35px}.web-collection-page .b2b-notice h2{font-size:17px}.web-collection-page .b2b-notice p{font-size:12px}
html[lang=ko] .assembly-copy h2{font-size:clamp(46px,4.5vw,69px);line-height:1.12;letter-spacing:-.065em}html[lang=ko] .assembly-copy h2 em{font-family:inherit;font-weight:850;font-style:normal;transform:rotate(-2deg);letter-spacing:-.065em}html[lang=ko] .assembly-lead{font-size:14px}
@keyframes maker-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.4deg)}}@keyframes sticky-nod{0%,100%{transform:rotate(8deg)}50%{transform:rotate(2deg)}}
.web-collection-page[data-assembly-motion=paused] .assembly-studio *{animation:none!important;transition:none!important}
@media(min-width:1800px){.assembly-studio{min-height:760px;gap:5%;padding:65px 0 80px}.assembly-copy h2{font-size:clamp(90px,4.1vw,150px)}html[lang=ko] .assembly-copy h2{font-size:clamp(80px,3.9vw,140px)}.assembly-lead{max-width:650px;font-size:clamp(17px,.65vw,24px)}html[lang=ko] .assembly-lead{font-size:clamp(17px,.6vw,23px)}.assembly-stage{height:710px}.assembly-browser{height:430px;top:85px}.assembly-browser-bar{height:39px;font-size:10px}.assembly-canvas{height:calc(100% - 39px);margin:0 20px}.piece-layout{top:20px;height:80px;padding:14px 18px}.piece-layout strong{font-size:22px}.piece-number{font-size:9px}.mini-nav{top:19px;right:17px;font-size:8px}.piece-image,.piece-type{top:117px;height:185px}.piece-type{padding:17px}.piece-type strong{font-size:clamp(33px,1.4vw,48px)}.piece-type p{font-size:11px;margin-top:12px}.piece-image>span{font-size:8px}.piece-code{top:320px;height:51px}.piece-code strong{font-size:10px}.assembly-maker{max-height:610px}.assembly-pieces{bottom:55px}.assembly-pieces button{min-height:48px;font-size:12px}.assembly-caption{font-size:9px}.assembly-sticky{font-size:13px;padding:17px}.assembly-progress{max-width:600px}.assembly-status{font-size:14px}.assembly-kicker{font-size:12px}.assembly-divider{font-size:12px}.assembly-divider>span:last-child{font-size:10px}}
@media(max-width:1050px){.assembly-studio{grid-template-columns:1fr 1.1fr;gap:25px}.assembly-copy h2{font-size:clamp(40px,5.2vw,60px)}html[lang=ko] .assembly-copy h2{font-size:clamp(38px,4.5vw,54px)}.assembly-stage{height:530px}.assembly-browser{width:76%;height:300px;right:12px}.piece-image,.piece-type{height:119px}.piece-type strong{font-size:21px}.piece-code{top:210px}.assembly-pieces{right:12px;left:35%;bottom:42px;gap:5px}.assembly-pieces button{padding:5px;font-size:8px;gap:4px}.assembly-maker{width:46%;left:-5%;bottom:30px}.assembly-caption{bottom:13px;left:35%;right:12px}.assembly-sticky{right:-7px;font-size:9px;padding:9px}.assembly-copy .assembly-actions{gap:9px}.assembly-next{padding:0 12px;gap:9px}.assembly-lead{font-size:14px}}
@media(max-width:760px){.assembly-studio{grid-template-columns:1fr;gap:36px;padding:26px 0 34px;min-height:0}.assembly-kicker{font-size:8px;margin-bottom:18px}.assembly-copy h2{font-size:clamp(46px,11vw,77px)}html[lang=ko] .assembly-copy h2{font-size:clamp(43px,10.6vw,70px)}.assembly-lead{font-size:14px;line-height:1.8;max-width:440px;margin:22px 0}.assembly-progress{margin-top:21px;max-width:none}.assembly-stage{height:500px;max-width:530px;width:100%;margin:0 auto}.assembly-browser{right:13px;top:60px;width:77%;height:297px}.assembly-maker{width:43%;left:-5%;bottom:65px;max-height:350px}.assembly-pieces{left:30%;right:13px;bottom:42px}.assembly-pieces button{font-size:9px;min-height:44px;padding:6px}.assembly-caption{left:30%;font-size:6px}.assembly-sticky{top:20px;right:-5px;font-size:9px}.piece-layout strong{font-size:12px}.piece-code strong{font-size:5px}.mini-nav{display:none}.assembly-divider>span:last-child{display:none}.web-collection-page .b2b-notice{grid-template-columns:30px 1fr;gap:12px;padding:18px 15px}.web-collection-page .b2b-icon{display:grid;width:30px;height:34px}.web-collection-page .b2b-icon svg{width:21px;height:21px}.web-collection-page .b2b-notice h2{font-size:15px}.web-collection-page .b2b-notice p{font-size:12px}.web-collection-page .project-card{border:1px solid #d9d9cc;padding:9px;background:#fbfaf4}.web-collection-page .project-card h2,.web-collection-page .project-card p,.web-collection-page .project-card .card-meta,.web-collection-page .project-card .stage{margin-left:6px;margin-right:6px}}
@media(max-width:370px){.assembly-stage{height:480px}.assembly-browser{right:10px;width:79%;height:277px;top:59px}.assembly-canvas{margin:0 10px}.piece-layout{height:48px;top:13px;padding:8px}.piece-layout strong{font-size:10px}.piece-image,.piece-type{top:70px;height:112px}.piece-type{padding:8px}.piece-type strong{font-size:19px}.piece-code{top:193px;height:37px}.piece-code strong{font-size:4.5px;letter-spacing:0}.piece-number{font-size:5px}.assembly-maker{bottom:66px;width:44%}.assembly-pieces{left:28%;right:10px;gap:5px}.assembly-pieces button{font-size:8px;padding:4px;gap:3px}.piece-swatch{width:18px;height:21px;font-size:8px}.assembly-status{font-size:10px}.assembly-kicker{letter-spacing:.7px}.assembly-copy .assembly-next{font-size:10px;gap:10px}.assembly-caption{left:28%;right:10px;font-size:5.5px}.assembly-browser-bar{font-size:6px;gap:6px}.assembly-sticky{font-size:8px}.draft-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.assembly-studio *{animation:none!important;transition:none!important}}

.assembly-studio[data-on-screen=false] .assembly-maker{animation-play-state:paused}

.web-collection-page .b2b-notice>div:last-child{min-width:0}
@media(min-width:1800px){.web-collection-page .title-row h1{font-size:clamp(15px,.5vw,21px)}.web-collection-page .count{font-size:14px}}