.micro{display: block; font: 10px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--green);}



































































.project-record > .micro{margin-bottom: 18px;}















.document-stage{display: grid; grid-template-columns: 0.85fr 1.2fr; align-items: center; gap: 15px; min-height: 470px; overflow: hidden; background: var(--stage); border: 1px solid var(--line); border-radius: 7px; padding: 38px;}
.document-story{position: relative; z-index: 2;}
.document-story h4,.live-copy h4{font: 600 30px/1.5 var(--sans); letter-spacing: -0.035em; margin: 15px 0px;}
.showcase .document-story > p,.showcase .live-copy > p{font-size: 13px; line-height: 1.95; color: var(--ink-soft); max-width: 315px;}
.document-facts{display: flex; gap: 30px; margin: 23px 0px;}
.document-facts span{font-size: 10px; color: var(--muted);}
.document-facts b{display: block; font: 600 25px/1.3 var(--sans); color: var(--green); margin-bottom: 6px;}
.text-link{display: inline-flex; gap: 20px; padding: 9px 0px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--green); background: none; color: var(--green); font-size: 12px; cursor: pointer; text-align: left;}
.document-fan{position: relative; height: 340px; perspective: 1300px; margin: 25px 0px;}
.paper-preview{position: absolute; width: 49%; aspect-ratio: 210 / 297; left: calc(2% + var(--n)*22%); top: calc(27px - var(--n)*10px); border: 1px solid rgb(216, 221, 215); padding: 0px; background: rgb(255, 255, 255); color: rgb(23, 36, 60); box-shadow: rgba(23, 36, 60, 0.396) 0px 18px 32px -20px; transform-origin: 50% 90%; transform: rotate(calc(-12deg + var(--n)*11deg)) rotateY(-9deg); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, top 0.4s; cursor: pointer; overflow: hidden; text-align: left;}
.paper-preview img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.paper-preview > span{position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 9px 10px; background: rgba(255, 255, 255, 0.937); border-top: 1px solid rgb(216, 221, 215); font-size: 9px;}
.paper-preview > span b{float: right;}
.document-fan:hover .paper-preview{transform: rotate(calc(-15deg + var(--n)*14deg)) translateX(calc(-12px + var(--n)*12px)) rotateY(-4deg);}
.document-fan .paper-preview:hover,.document-fan .paper-preview:focus-visible{transform: translateY(-22px) rotate(0deg) scale(1.06); z-index: 5; box-shadow: rgba(23, 36, 60, 0.376) 0px 30px 55px -25px;}
.paper-1{z-index: 2;}
.paper-2{z-index: 3;}
.live-teaching{display: grid; grid-template-columns: 0.85fr 1.2fr; gap: 40px; align-items: center; margin-top: 24px; padding: 35px 38px; background: rgb(20, 44, 41); border: 1px solid rgb(43, 71, 64); border-radius: 7px; color: rgb(237, 244, 237); overflow: hidden;}
.live-copy .micro{color: rgb(157, 212, 181);}
.live-copy h4{color: inherit;}
.showcase .live-copy > p{color: rgb(197, 210, 203);}
.live-actions{display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px;}
.live-actions .text-link{font-size: 11px; color: rgb(179, 227, 199); border-color: rgb(115, 148, 132);}
.live-visual{position: relative; border: 1px solid rgb(74, 101, 91); border-radius: 4px; padding: 0px; cursor: pointer; overflow: hidden; background: rgb(248, 250, 251); box-shadow: rgba(0, 0, 0, 0.6) 0px 20px 44px -20px; transform: perspective(1500px) rotateY(-5deg); transition: transform 0.4s;}
.live-visual:hover{transform: perspective(1500px) rotateY(0deg);}
.live-visual img{width: 100%; height: auto; display: block;}
.live-visual > span{display: flex; align-items: center; gap: 8px; background: rgb(23, 56, 46); color: rgb(221, 242, 230); padding: 12px; font-size: 10px;}
.live-visual b{margin-left: auto; font-size: 16px;}
.live-visual i{width: 5px; height: 5px; border-radius: 50%; background: rgb(157, 212, 181); box-shadow: rgba(255, 255, 255, 0.063) 0px 0px 0px 4px;}







.work-grid{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 28px 20px;}
.work-tile{border: 0px; background: none; padding: 0px; text-align: left; cursor: pointer; min-width: 0px; transition: transform 0.25s;}
.work-tile[hidden]{display: none;}
.tile-image{position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: rgb(238, 238, 233); aspect-ratio: 16 / 11;}
.tile-image img{width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s;}
.tile-image > span{position: absolute; bottom: 10px; right: 10px; background: rgba(23, 36, 60, 0.92); color: rgb(255, 255, 255); padding: 5px 9px; border-radius: 3px; font-size: 10px; opacity: 0; transform: translateY(5px); transition: opacity 0.2s, transform 0.2s;}
.work-tile:hover .tile-image img,.work-tile:focus-visible .tile-image img{transform: scale(1.035);}
.work-tile:hover .tile-image > span,.work-tile:focus-visible .tile-image > span{opacity: 1; transform: translateY(0px);}
.tile-caption{padding: 12px 0px 0px;}
.tile-caption small{font-size: 9px; color: var(--muted);}
.tile-caption h5{font-size: 13px; color: var(--ink); font-weight: 600; margin: 4px 0px;}
.tile-caption > span{font-size: 10px; color: var(--muted); line-height: 1.8;}
.work-dialog{width: min(1240px, 94vw); max-width: none; height: min(850px, 92dvh); max-height: 92dvh; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; padding: 0px; box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 100px; overflow: hidden;}
.work-dialog::backdrop{background: rgba(8, 27, 35, 0.72); backdrop-filter: blur(9px);}
.work-dialog[open]{display: flex; flex-direction: column; animation: 0.2s ease-out 0s 1 normal none running dialog-in;}
.work-dialog-header{display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; border-bottom: 1px solid var(--line); flex: 0 0 auto;}
.work-dialog-header h3{font-size: 18px; margin: 3px 0px 0px; line-height: 1.5;}
.work-dialog-header .micro{font-size: 9px;}
.dialog-close{width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 25px; line-height: 1; cursor: pointer; flex: 0 0 auto;}
.work-dialog-body{display: grid; grid-template-columns: minmax(0px, 1fr) 250px; min-height: 0px; flex: 1 1 0%;}
.work-canvas{overflow: auto; overscroll-behavior: contain; background: var(--stage); padding: 24px; text-align: center; min-width: 0px; position: relative;}
.work-canvas > img{display: block; max-width: 100%; height: auto; margin: 0px auto; box-shadow: rgba(19, 44, 32, 0.1) 0px 8px 30px;}
.work-canvas > iframe{width: 100%; height: 100%; min-height: 450px; border: 0px; background: white;}
.work-canvas.has-frame{padding: 0px;}
.work-context{padding: 23px; border-left: 1px solid var(--line); overflow: auto;}
.work-context > p{font-size: 12px; color: var(--ink-soft); line-height: 1.95;}
.work-pages{display: flex; flex-direction: column; gap: 8px; margin-top: 23px;}
.work-pages button{font-size: 11px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); cursor: pointer; line-height: 1.7;}
.work-pages button[aria-pressed="true"]{border-color: var(--green); background: var(--stage); color: var(--green);}


.work-canvas > [hidden]{display: none;}
.work-dialog.frame-mode{width: min(1440px, 96vw);}
.work-dialog.frame-mode .work-dialog-body{grid-template-columns: minmax(0px, 1fr) 210px;}












.work-dialog{margin: auto;}
.work-rights{border-top: 1px solid var(--line); padding-top: 15px; margin-top: 23px !important; font-size: 10px !important; color: var(--muted) !important; line-height: 1.9 !important;}


@media (max-width: 550px){.document-stage .document-story > h4 br{display: block !important;}
.document-stage .document-fan{height: 265px;}}

@keyframes dialog-in { 
  0% { opacity: 0.3; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 1100px){



.document-stage,.live-teaching{padding: 28px;}
.document-story h4,.live-copy h4{font-size: 26px;}
.document-fan{height: 290px;}}
@media (max-width: 820px){





















.document-stage{grid-template-columns: 1fr 1.1fr; padding: 25px; min-height: 400px;}
.document-fan{height: 260px;}
.document-story h4,.live-copy h4{font-size: 24px;}
.document-facts{gap: 18px;}
.live-teaching{grid-template-columns: 1fr; padding: 25px; gap: 25px;}
.live-copy > h4 br{display: none;}
.live-copy > p{max-width: none;}
.live-visual{transform: none;}
.work-grid{grid-template-columns: 1fr 1fr;}
.work-dialog{height: 93dvh; max-height: 93dvh; width: 96vw;}
.work-dialog-body,.work-dialog.frame-mode .work-dialog-body{grid-template-columns: 1fr; display: flex; flex-direction: column;}
.work-canvas{flex: 1 1 0%; min-height: 0px; overflow: auto; padding: 14px;}
.work-context{border-left: 0px; border-top: 1px solid var(--line); padding: 14px; flex: 0 0 auto; max-height: 32%;}
.work-context > p{font-size: 11px; margin: 0px;}
.work-pages{flex-flow: row; overflow: auto; margin: 12px 0px 0px; gap: 7px;}
.work-pages button{flex: 0 0 auto; max-width: 230px; font-size: 10px; padding: 8px;}


.work-dialog.frame-mode .work-canvas{min-height: 50dvh;}
.work-canvas > iframe{min-height: 100%; height: 100%;}
.work-dialog-header{padding: 14px 16px;}
.work-dialog-header h3{font-size: 15px;}
.dialog-close{width: 32px; height: 32px;}}
@media (max-width: 550px){



















.document-stage{grid-template-columns: 1fr; padding: 24px 22px; min-height: 0px; gap: 0px;}
.document-story > h4 br{display: none;}
.document-story h4{font-size: 24px;}
.document-story > p{max-width: none;}
.document-facts{margin: 20px 0px; gap: 30px;}
.document-fan{height: 300px; width: 100%; max-width: 370px; margin: 25px auto 6px;}
.paper-preview{width: 48%; left: calc(1% + var(--n)*22%);}
.paper-preview > span{font-size: 8px; padding: 7px;}
.live-teaching{padding: 24px 22px;}
.live-copy h4{font-size: 24px;}




.work-grid{gap: 23px 14px;}
.tile-caption h5{font-size: 12px; line-height: 1.7;}
.tile-caption > span{font-size: 9px;}
.tile-image{aspect-ratio: 4 / 3;}
.tile-image > span{display: none;}













.work-dialog-header h3{font-size: 14px;}
.work-dialog-header{gap: 10px;}}
@media (prefers-reduced-motion: reduce){

.document-fan .paper-preview:hover,.document-fan:hover .paper-preview{transform: rotate(calc(-12deg + var(--n)*11deg));}
.work-tile:hover .tile-image img{transform: none;}}
@media print{.work-dialog,.text-link{display: none !important;}

.work-grid{display: none;}
.document-stage,.live-teaching{min-height: 0px; padding: 12px; box-shadow: none; background: white !important; color: rgb(17, 17, 17) !important;}
.live-copy > p{color: rgb(51, 51, 51) !important;}
.document-fan{height: 220px;}





.project-record > .micro{margin-bottom: 8px;}






}