*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#f8f8fa;background:#121318;color-scheme:dark;font-synthesis:none}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ff8299;outline-offset:4px}.topbar{height:86px;border-bottom:1px solid #2a2b32;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.topbar img{object-fit:contain;display:block}.topbar>span{font-size:12px;letter-spacing:1.7px;color:#999ba8}.slash{padding:0 17px;color:#e51d46}main{max-width:1440px;margin:auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:7%;padding:50px 5vw 40px}.editor{padding-top:14px}.eyebrow{font-size:12px;letter-spacing:1.8px;color:#f06580;font-weight:700}h1{font-size:48px;letter-spacing:-2px;line-height:1.06;margin:20px 0}h1>span{color:#ee2852}.intro{font-size:16px;line-height:1.6;color:#a9abb6;max-width:270px}.divider{height:1px;background:#2f3038;margin:30px 0}label{display:block;font-size:14px;font-weight:600;margin-bottom:11px}#student{width:100%;border:1px solid #3b3d47;background:#1d1f26;border-radius:7px;padding:14px;color:white;font-size:16px}input::placeholder{color:#868995}.quantity-label{display:flex;justify-content:space-between;margin-top:25px}.quantity-label>span{font-size:13px;color:#9294a1}.stepper{display:flex;align-items:center;border:1px solid #3b3d47;background:#1d1f26;border-radius:7px;overflow:hidden;height:50px}.stepper button{width:54px;height:100%;background:transparent;border:0;color:#ddd;font-size:24px}.stepper button:hover:not(:disabled){background:#35333d}.stepper input{width:100%;min-width:0;text-align:center;background:none;border:0;font-size:18px;font-weight:700;appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.hint{font-size:13px;color:#9294a1;margin:10px 0}.instructions{display:grid;grid-template-columns:26px 1fr;gap:15px 10px;margin:30px 0}.instructions p{font-size:14px;color:#b5b6c0;line-height:1.5;margin:0}.small-number{color:#ef4264;font-size:12px;font-weight:700;padding-top:4px}.download{display:flex;align-items:center;justify-content:space-between;background:#e51d46;color:white;border:0;border-radius:7px;padding:17px 20px;width:100%;font-size:16px;font-weight:700}.download:hover{background:#fc315b}.download span{font-size:23px;line-height:18px}.local-note{font-size:12px;color:#9294a1;line-height:1.6;margin:13px 0}#status{font-size:14px;color:#ff9eb1;line-height:1.5}.workspace{max-width:650px;width:100%;justify-self:center}.workspace-top{display:flex;justify-content:space-between;align-items:center;color:#a9abb6;font-size:12px;letter-spacing:1.5px;margin-bottom:16px}.workspace-top #progress{letter-spacing:0;font-size:13px}.board{background:#20222d url('assets/background.png') center/cover;padding:25px 25px 0;box-shadow:0 20px 65px #0005;border:1px solid #41424c}.board-heading{text-align:center;margin:0 0 22px}.board-heading p{font-size:13px;letter-spacing:2px;color:#c3c3cd;margin:0 0 8px;font-weight:700}.board-heading h2{font-size:25px;line-height:1.2;margin:0;overflow-wrap:anywhere;text-transform:uppercase;letter-spacing:.3px}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:94px;gap:10px}.tile{position:relative;grid-column:span 2;grid-row:span 2;overflow:hidden;background:linear-gradient(145deg,#393b48eb,#292b36ed);border:1px solid #77798555;border-radius:3px;min-width:0}.photo-button{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;color:#c2c3cc;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:10px 8px 42px;font-size:13px}.photo-button:hover{background:#ffffff08;color:white}.photo-button img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}.photo-icon{font-size:26px;font-weight:400;color:#ec627e;line-height:1}.tile-number{position:absolute;left:10px;top:10px;font-size:12px;color:#999ba9}.artist{position:absolute;bottom:0;left:0;width:100%;border:0;border-radius:0;color:white;background:linear-gradient(transparent,#111219e8);padding:18px 10px 10px;font-size:13px;font-weight:700;min-width:0}.artist::placeholder{color:#d5d6dc}.remove{position:absolute;top:7px;right:7px;border:1px solid #ffffff44;background:#181920c9;color:white;border-radius:50%;width:29px;height:29px;font-size:18px}.board-footer{height:65px;display:flex;align-items:center;justify-content:center}.board-footer img{object-fit:contain}.workspace-note{text-align:center;color:#767987;font-size:12px;margin:18px 0}.photo-button .replace-label{position:relative;background:#111b;padding:7px 10px;border-radius:4px;opacity:0}.photo-button:hover .replace-label,.photo-button:focus-visible .replace-label{opacity:1}@media(min-width:1300px){main{gap:100px}.grid{grid-auto-rows:104px}}@media(max-width:850px){main{grid-template-columns:270px minmax(0,1fr);gap:25px;padding:30px 24px}h1{font-size:39px}.board{padding:18px 14px 0}.grid{gap:7px;grid-auto-rows:73px}.photo-button{font-size:12px}.board-heading h2{font-size:21px}.artist{font-size:12px;padding-left:6px}}@media(max-width:650px){.topbar{height:70px;padding:0 22px}.topbar img{width:105px}.topbar>span{font-size:10px;letter-spacing:.7px}.topbar .slash{padding:0 7px}main{display:flex;flex-direction:column;padding:25px 20px;gap:25px}.editor{padding-top:0}h1{font-size:38px;margin:12px 0}h1 br{display:none}.intro{max-width:none;margin:10px 0}.divider{margin:20px 0}.instructions{margin:20px 0;gap:9px}.workspace{max-width:500px}.grid{grid-auto-rows:80px}.board{padding:20px 15px 0}.board-heading{margin-bottom:18px}.local-note{max-width:330px}.eyebrow{font-size:11px}}@media(prefers-reduced-motion:no-preference){button{transition:background .18s,color .18s}}
@media(max-width:650px){.topbar>a{flex-shrink:0}.topbar>span{max-width:180px;text-align:right;line-height:1.6}h1{font-size:36px}.grid.reference .tile:nth-child(3) .tile-number,.grid.reference .tile:nth-child(4) .tile-number,.grid.reference .tile:nth-child(3) .photo-icon,.grid.reference .tile:nth-child(4) .photo-icon{display:none}.grid.reference .tile:nth-child(3) .photo-button,.grid.reference .tile:nth-child(4) .photo-button{padding-bottom:30px}}

.tile.drop-target{outline:3px solid #ff6585;outline-offset:-3px;background:#56293e}.tile.dragging{opacity:.4}.tile.moving{outline:3px solid #ff6585;outline-offset:-3px}.photo-button[draggable=true],.move{cursor:grab}.photo-button[draggable=true]:active,.move:active{cursor:grabbing}.move{position:absolute;top:7px;left:7px;width:32px;height:30px;border:1px solid #ffffff55;border-radius:5px;background:#181920db;color:white;font-size:20px}.compact .tile-number,.compact .photo-icon{display:none}.compact .photo-button{padding-bottom:30px}.tile.moving .move{background:#e51d46}.photo-button img{pointer-events:none}.tile-number{top:44px}.resize-handle{position:absolute;z-index:3;right:0;bottom:0;width:28px;height:28px;padding:0;background:#20212ddd;border:0;color:#ff8299;cursor:nwse-resize;touch-action:none;font-size:21px}.artist{padding-right:30px}.photo-button{padding-top:40px}.compact .photo-button{padding-top:30px;font-size:12px}.tile{min-height:94px}.grid{grid-auto-rows:100px}@media(max-width:650px){.grid{grid-auto-rows:105px}.compact .photo-button{font-size:11px;padding-top:33px}}

.move{touch-action:none}.tile-number{top:12px;left:47px}
.crop-button{position:absolute;top:7px;right:43px;width:30px;height:29px;display:grid;place-items:center;background:#181920e8;border:1px solid #ffffff55;border-radius:4px;color:white;cursor:pointer}.crop-dialog{width:min(520px,calc(100% - 24px));max-height:92dvh;overflow:auto;padding:22px;background:#20222b;border:1px solid #535560;border-radius:12px;color:white}.crop-dialog::backdrop{background:#000b}.crop-heading{display:flex;align-items:center;justify-content:space-between}.crop-heading h2{font-size:22px;margin:0}.crop-heading button{font-size:24px}.crop-dialog p{font-size:14px;color:#c3c4cc}.crop-dialog button{background:#353742;border:1px solid #5a5c68;border-radius:5px;color:white;padding:8px 12px}.crop-preview{position:relative;overflow:hidden;background:#14151b;width:min(100%,330px);max-height:48dvh;margin:16px auto;touch-action:none;cursor:grab;outline:1px solid #70727e}.crop-preview:active{cursor:grabbing}.crop-preview img{position:absolute;max-width:none;pointer-events:none;user-select:none}.crop-dialog label{display:flex;justify-content:space-between;margin-top:20px}.crop-dialog input[type=range]{width:100%;accent-color:#e51d46}.crop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}.crop-actions #crop-apply{background:#e51d46;border-color:#e51d46}
.undo-delete{background:transparent;border:0;color:#ff9eb1;text-decoration:underline;font:inherit;cursor:pointer;padding:4px 6px}.remove{z-index:4}
main{display:block;max-width:900px;padding:30px 24px 40px}.workspace{max-width:720px;margin:auto}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.board-toolbar h1{font-size:24px;letter-spacing:-.6px;line-height:1.2;margin:0 0 8px}.board-toolbar #progress{font-size:13px;color:#b5b6c0}.board-toolbar .download{width:auto;white-space:nowrap;padding:12px 18px;font-size:14px}.board-help{color:#aaaeba;font-size:14px;line-height:1.5;margin:12px 0}.board-heading #board-name{display:block;width:100%;text-align:center;border:1px dashed transparent;border-radius:4px;background:transparent;color:white;font-size:25px;line-height:1.2;font-weight:700;text-transform:uppercase;padding:4px 0;font-family:Arial,Helvetica,sans-serif}.board-heading #board-name::placeholder{color:#fff;opacity:1}.board-heading #board-name:hover{border-color:#ffffff55}.board-heading #board-name:focus{border-color:#ff8299;outline:1px solid #ff8299}.add-frame{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;padding:17px;border:1px dashed #a64961;border-radius:5px;background:#e51d4610;color:#ff9eb1;font-size:16px;margin-top:16px}.add-frame span{font-size:28px;line-height:20px}.add-frame:hover{background:#e51d4620}.local-note{text-align:center;max-width:none}#status:empty{display:none}@media(max-width:650px){main{padding:20px 14px}.board-toolbar h1{font-size:20px}.board-toolbar .download{padding:10px;font-size:13px}.board-heading #board-name{font-size:22px}.local-note{max-width:none}}
.board>.add-frame{margin:14px 0 0;background:#20222bc9}.board>.add-frame:hover{background:#402431}
.tile-number{left:10px}