*{box-sizing:border-box} :root{font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#30213f;background:#f3eff7;font-synthesis:none}body{margin:0;background-image:radial-gradient(#b9a9cd55 .7px,transparent .7px);background-size:12px 12px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #da6628;outline-offset:4px}button{transition:transform .12s,background .12s}button:not(:disabled):active{transform:translateY(2px)}.masthead{height:86px;border-bottom:1px solid #dcd3e5;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 32px}.wordmark{color:#493060;text-decoration:none;display:flex;gap:10px;align-items:center;font-size:15px;letter-spacing:2px;font-weight:900}.brand-icon{font-size:30px}.edition{font-size:12px;color:#84718f}main{max-width:1080px;margin:auto;padding:44px 32px 0}.intro{text-align:center;margin-bottom:34px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.8px;color:#8c719f}h1{font-size:38px;letter-spacing:-1.7px;line-height:1.3;margin:14px 0}h1 span{color:#8963b2}.intro p{color:#7b6b87;font-size:13px;line-height:1.8;margin:0}.workspace{display:grid;grid-template-columns:460px 1fr;gap:40px;align-items:start;max-width:920px;margin:auto}.handheld{border:2px solid #62428c;border-radius:28px 28px 66px 28px;padding:23px 26px 22px;background:#b498d6;box-shadow:inset 4px 4px 0 #d0b7ee,inset -6px -7px 0 #9272b8,0 10px 0 #6d4c91,0 20px 28px #61487325}.device-top{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1.5px;color:#4f356d;margin:0 3px 16px}.device-top>span:first-child{display:flex;align-items:center;gap:7px}.power-light{height:6px;width:6px;display:inline-block;border-radius:50%;background:#d9ff92;box-shadow:0 0 6px #d9ff92}.screen-surround{background:#423a52;padding:17px 17px 13px;border-radius:13px 13px 31px 13px;box-shadow:inset 0 3px 0 #322b42}.screen-top,.screen-bottom{display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.8px;color:#bdb3ce}.screen-top{margin-bottom:11px}.screen-bottom{margin-top:12px}.screen-bottom b{font-weight:400;color:#e0d9e9}#board{display:grid;grid-template-columns:repeat(16,1fr);aspect-ratio:1;border:3px solid #292333;touch-action:none;user-select:none;background:#ede8ed;cursor:crosshair;isolation:isolate}.pixel-row{display:contents}.pixel{margin:0;padding:0;border:0;min-width:0;position:relative;background-color:var(--checker);border-radius:0;cursor:inherit}.pixel::after{content:"";position:absolute;inset:0;background:var(--pixel,transparent);box-shadow:inset -1px -1px #3424420e;pointer-events:none}.pixel:hover::before{content:"";position:absolute;inset:0;border:1px solid #fff;outline:1px solid #49335a;z-index:2}.pixel:focus-visible{outline:2px solid white;outline-offset:-3px;z-index:3;box-shadow:inset 0 0 0 4px #21122f}.pixel:focus-visible::after{z-index:-1}.pixel:not(:disabled):active{transform:none}.device-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px}.history{display:grid;grid-template-columns:36px 36px;gap:7px}.history button{height:32px;background:#745390;color:#f0e7fa;border:1px solid #604179;box-shadow:0 3px 0 #62467b;border-radius:9px;font-size:24px;line-height:1}.history>span{grid-column:1/-1;font:8px monospace;letter-spacing:1.3px;text-align:center;margin-top:3px;color:#604778}.mode-buttons{display:flex;gap:9px;transform:rotate(-5deg)}.mode{height:51px;width:79px;border-radius:24px;border:1px solid #755190;background:#9b77bd;color:#342041;box-shadow:0 4px 0 #765191;font-size:11px;font-weight:bold;display:flex;align-items:center;justify-content:center;gap:4px}.mode>span{font-size:20px}.mode.active{background:#f7d374;border-color:#90723e;box-shadow:0 4px 0 #94703f}.device-foot{display:flex;align-items:center;justify-content:space-between;margin:24px 6px 0;color:#604277}.device-foot>span{font-size:17px;font-style:italic;font-weight:900;letter-spacing:-.7px}.registered{font-size:9px;vertical-align:super;margin-left:3px}.speaker{display:flex;gap:5px;transform:rotate(-22deg);padding-right:12px}.speaker i{height:23px;width:4px;background:#9677b8;border-radius:5px;box-shadow:inset 1px 1px #70548f}.side-panel{padding-top:1px}.tool-card{border:1px solid #ddd3e7;background:#fcfafde8;border-radius:17px;padding:24px;margin-bottom:17px;box-shadow:0 4px 0 #e8e0ef66}.card-heading{display:flex;align-items:center;gap:8px;margin-bottom:22px}.step{font:10px monospace;color:#8962a8;background:#eee5f4;padding:4px 5px;border-radius:4px}h2{font-size:15px;letter-spacing:-.4px;margin:0}.small-tag{margin-left:auto;font:8px monospace;letter-spacing:.4px;color:#8c7a98}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:0 1px 24px}.swatch{width:100%;aspect-ratio:1;border:1px solid #30213f20;border-radius:6px;position:relative;background:var(--swatch)}.swatch[aria-pressed=true]{outline:2px solid #785398;outline-offset:3px}.swatch[aria-pressed=true]::after{content:"";position:absolute;width:5px;height:5px;background:white;border:1px solid #30213f;border-radius:50%;left:calc(50% - 3px);top:calc(50% - 3px)}.custom-color{border-top:1px dashed #ded3e7;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}.custom-color label{font-size:12px;font-weight:bold}.custom-color label span{display:block;font-size:10px;color:#95869e;font-weight:normal;margin-top:5px}.color-value{display:flex;gap:8px;align-items:center}.color-value>span{font:10px monospace;color:#71627c}input[type=color]{width:34px;height:34px;padding:3px;border:1px solid #ddd3e7;border-radius:6px;background:#fff;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}.field-label{display:block;color:#806e8e;font-size:11px;margin-bottom:8px}select{width:100%;padding:12px 10px;background:#f7f2fa;border:1px solid #dcd1e5;border-radius:8px;color:#4f3b60;font-size:12px}.export-note{font-size:10px;color:#95839f;margin:11px 0 17px}.export-button{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid #573774;background:#755094;color:#fff;border-radius:9px;padding:14px 17px;font-weight:bold;font-size:13px;box-shadow:0 3px 0 #51316d}.export-button>span:last-child{font-size:20px;line-height:14px}#status{min-height:28px;font-size:10px;color:#81718e;line-height:1.5;margin:14px 0 0}.guide{padding:4px 9px}.guide h2{font-size:12px}.guide p{font-size:11px;line-height:1.9;color:#867391;margin:9px 0}kbd{font:9px monospace;border:1px solid #d7cce1;border-radius:3px;padding:1px 3px;background:#f9f6fc;color:#6f537f}.clear-button{padding:8px 0;border:0;border-bottom:1px solid #ad98bb;background:none;color:#765a88;font-size:11px}.clear-button span{margin-left:35px}footer{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #ded5e7;margin-top:46px;padding:24px 0 28px}.privacy-icon{font-size:20px;color:#9679ab}footer p{font-size:10px;line-height:1.9;color:#9a88a5;margin:0}.footer-brand{margin-left:auto;font:8px monospace;white-space:nowrap;color:#a691b2;padding-top:6px}dialog{border:1px solid #b79ccf;border-radius:20px;background:#faf6ff;color:#382448;padding:28px;max-width:calc(100% - 36px);width:370px;box-shadow:0 16px 80px #24113350}dialog::backdrop{background:#24113370;backdrop-filter:blur(3px)}.dialog-icon{font-size:32px;color:#9066b1;margin-bottom:16px}dialog h2{font-size:19px}dialog p{font-size:13px;line-height:1.8;color:#887291}.dialog-actions{display:flex;gap:10px;margin-top:25px}.dialog-actions button{flex:1;border:1px solid #d6c6e3;border-radius:8px;padding:12px;background:#f1e8f8;color:#68447e}.dialog-actions button:last-child{background:#765094;color:white;border-color:#765094}@media(min-width:1100px){.intro br:first-of-type{display:none}.intro h1 br{display:none}.intro h1 span{margin-left:8px}}@media(max-width:850px){.workspace{grid-template-columns:minmax(290px,430px);justify-content:center;gap:35px}.side-panel{display:grid;grid-template-columns:1fr}.intro{margin-bottom:28px}.intro h1{font-size:31px}.footer-brand{display:none}main{padding-top:30px}.masthead{height:70px}.handheld{padding:23px 24px}.guide{padding-bottom:4px}}@media(max-width:440px){.masthead{padding:0 20px}.wordmark{font-size:12px;letter-spacing:1.2px}.edition{font-size:9px}.brand-icon{font-size:25px}main{padding:26px 18px 0}.eyebrow{font-size:9px;letter-spacing:2px}.intro h1{font-size:29px}.intro p{font-size:12px}.handheld{padding:20px 20px 23px;border-radius:24px 24px 54px 24px}.screen-surround{padding:14px 12px 12px}.screen-top,.screen-bottom{font-size:8px;letter-spacing:.4px}.device-controls{gap:9px;margin-top:21px}.mode{width:69px;height:45px;font-size:10px}.mode-buttons{gap:7px}.history{grid-template-columns:31px 31px;gap:5px}.history button{height:29px}.history>span{font-size:7px}.device-foot{margin-top:22px}.tool-card{padding:22px}.palette{gap:8px}.workspace{gap:31px}.footer-brand{display:none}footer{margin-top:28px}footer br{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}