/* Open Flashcards / print-inspired Creative Workspace; adapted from user-supplied D concept.
   Standalone implementation: no remote fonts, UI frameworks, tracking, external assets. */
:root{--ink:#201e1d;--muted:#645f5d;--line:#d4cecc;--paper:#faf9f7;--cream:#f3f2f2;--accent:#0088b0;--mint:#e9f8ff;color-scheme:light;font-family:Georgia,'Times New Roman',serif}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{background:#e9e7e7;color:var(--ink)}
.app-shell{max-width:1600px;background:var(--cream);min-height:100vh;box-shadow:0 0 0 1px #d8d2d0}
.topbar{height:78px;border-color:var(--line);padding:0 clamp(20px,3.4vw,53px);background:var(--cream);gap:24px}
.brand{flex:0 0 auto;gap:12px;letter-spacing:-.75px;font-size:21px;line-height:1.06;font-family:Georgia,serif;font-weight:700}
.brand small{font-family:'Segoe UI',Arial,sans-serif;margin-top:5px;font-size:8px;color:var(--muted);letter-spacing:1.9px}
.brand-mark{width:36px;height:36px;background:transparent;border:0;position:relative;border-radius:0;display:block}
.brand-mark i{position:absolute;width:23px;height:23px;border:1.6px solid var(--ink);background:transparent;top:5px;left:0}.brand-mark i:nth-child(2){border-color:#d6006c;left:5px;top:8px}.brand-mark i:nth-child(3){border-color:#0088b0;left:10px;top:11px}
.site-nav{display:flex;gap:clamp(12px,2vw,31px);justify-content:center;margin:auto;font:600 12px 'Segoe UI',Arial,sans-serif}.site-nav a{padding:9px 0;border-bottom:1px solid transparent;white-space:nowrap}.site-nav a:hover{border-color:#0088b0;color:#006786;text-decoration:none}
.top-actions{gap:12px}.top-note{font:11px 'Segoe UI',Arial,sans-serif;color:var(--muted)}.online-dot{background:#0088b0}
.btn{border-radius:2px;box-shadow:none;letter-spacing:.01em;min-height:41px;font:600 12px 'Segoe UI',Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:20px;text-decoration:none!important;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px);filter:none}.btn.primary{background:#006786;color:#fff;border:1px solid #006786}.btn.primary:hover{background:#004961}.btn.dark{background:var(--ink);border:1px solid var(--ink)}.btn.secondary{border:1px solid var(--ink);background:transparent;color:var(--ink)}.btn.secondary:hover{background:white}.btn.small{min-height:36px;padding:9px 16px}.plain-btn{font-family:'Segoe UI',Arial,sans-serif;color:#4c4645}
.workspace{padding:0 clamp(20px,3.4vw,53px) 50px}
.intro{min-height:355px;display:grid;grid-template-columns:minmax(370px,5fr) minmax(360px,7fr);padding:0;border-bottom:1px solid var(--line);align-items:stretch;gap:0}
.intro-copy{padding:42px 35px 41px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow,.project-summary>span:first-child{font:700 10px 'Segoe UI',Arial,sans-serif;letter-spacing:1.6px;color:#006786}
.intro h1{font:600 clamp(40px,3.3vw,57px)/1.04 Georgia,'Times New Roman',serif;letter-spacing:-1.9px;margin:21px 0}.intro h1 em{color:#006786;font-style:normal}
.intro p{color:#514e4e;max-width:450px;font:14px/1.67 'Segoe UI',Arial,sans-serif}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:27px}.hero-actions .btn{padding:13px 15px}
.hero-proof{font:700 9px 'Segoe UI',Arial,sans-serif;letter-spacing:1.6px;color:#777171;margin-top:25px}.hero-proof span{padding:0 9px;color:#0088b0}
.hero-composition{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(0deg,#e8f0f2 0,#e8f0f2 1px,transparent 1px,transparent 22px),repeating-linear-gradient(90deg,#e8f0f2 0,#e8f0f2 1px,#f4f7f7 1px,#f4f7f7 22px);display:flex;align-items:center;justify-content:center;gap:32px;padding:38px 25px 30px;overflow:hidden}
.hero-print-label,.hero-print-bottom{position:absolute;font:700 9px 'Segoe UI',Arial,sans-serif;letter-spacing:1.3px;color:#6e6665;top:18px;left:25px}.hero-print-bottom{top:auto;bottom:15px;right:25px;display:flex;justify-content:space-between}
.hero-card{width:clamp(137px,11.9vw,174px);height:clamp(193px,16.5vw,232px);flex:0 0 auto;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;border:1px solid var(--ink);background:#faf9f7;box-shadow:7px 7px 0 #0088b0,-5px -5px 0 #d6006c;padding:15px}
.hero-card.two{box-shadow:7px 7px 0 #d6006c,-5px -5px 0 #0088b0;transform:translateY(15px)}.hero-card-number{position:absolute;top:13px;left:13px;font:700 9px 'Segoe UI',Arial,sans-serif;letter-spacing:1px;color:#006786}.hero-symbol{font-size:56px;line-height:1}.hero-card strong{font-size:25px}.hero-card small{color:#706868;font:10px 'Segoe UI',Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.project-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;padding:30px 0 12px}.project-summary strong{font-size:22px;font-weight:600}.summary-meta{margin-left:auto;font:10px 'Segoe UI',Arial,sans-serif;color:#6b6664;letter-spacing:.5px}
.workgrid{grid-template-columns:minmax(260px,300px) minmax(370px,1fr) minmax(270px,315px);gap:14px;margin-top:9px}
.sidebar,.preview-panel{border:1px solid var(--line);border-radius:2px;background:#faf9f7;padding:20px}.content-area{border:1px solid var(--line);padding:20px;background:#f7f6f4}.preview-panel{background:#eceae8}
.panel-title{margin-bottom:17px;border-bottom:1px solid var(--line);padding-bottom:12px}.panel-title h2{font:600 19px Georgia,serif;letter-spacing:-.5px}.content-heading h2{font-size:23px}.section-num{width:auto;height:auto;background:transparent;border-radius:0;color:#006786;font:700 10px 'Segoe UI',Arial,sans-serif;margin-right:5px}.panel-title .muted{font:10px 'Segoe UI',Arial,sans-serif}
.field>span,.field-label{font:700 11px 'Segoe UI',Arial,sans-serif;color:#524b4b}.field input:not([type=color]),.field select,.library-controls select,.custom-form input{border-radius:1px;border-color:#ccc5c3;font:12px 'Segoe UI',Arial,sans-serif;background:white}.field input:focus,.field select:focus{border-color:#0088b0}.field{margin-bottom:14px}.sidebar hr{background:var(--line)}
.theme-options{gap:4px}.theme-option{border-radius:0;border:1px solid #d8d2ce;font-family:'Segoe UI',Arial,sans-serif;background:#fff}.theme-option.active{border-color:#0088b0;background:#e9f8ff;color:#004961}.theme-swatch{border-radius:0}.swatch-clean{background:#f7f6f2}.swatch-pastel{background:#e9f8ff;color:#0088b0}.swatch-bold{background:#201e1d;color:#fff}.swatch-mono{background:#fff}
.switch-row{font:12px 'Segoe UI',Arial,sans-serif;color:#575151;align-items:center}.switch-row input{accent-color:#006786}.sidebar-tip{border-radius:2px;background:#e9f8ff;border-color:#cbeeff}.sidebar-tip strong{color:#006786}.sidebar-tip p{color:#4c636a}
.count-pill{background:#e9f8ff;color:#006786;border-radius:1px;font:700 11px 'Segoe UI',Arial,sans-serif}.library-controls{grid-template-columns:minmax(0,1fr) 150px}.search-wrap{border-radius:1px;border-color:#ccc5c3}.library-actions{gap:12px}.link-btn{color:#006786;font-family:'Segoe UI',Arial,sans-serif}.muted-link{color:#7e7874}
.word-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:485px}.word-item{border-radius:1px;min-height:126px;border-color:#d8d2ce;background:#fdfcfb;gap:5px}.word-item:hover{border-color:#0088b0}.word-item.selected{background:#e9f8ff;border-color:#0088b0;box-shadow:inset 0 0 0 1px #0088b0}.word-item strong{font:600 14px Georgia,serif}.word-item small{font:10px 'Segoe UI',Arial,sans-serif}.word-item .checkmark{border-radius:0}.word-item.selected .checkmark{background:#006786;border-color:#006786}.word-item img.emoji-icon{display:block;width:49px;height:49px;object-fit:contain;flex:none}
.custom-area,.selected-section{border-color:var(--line)}.custom-area h3,.selected-head h3{font:600 18px Georgia,serif}.custom-area p,.selected-head p{font:11px/1.5 'Segoe UI',Arial,sans-serif}.custom-form{grid-template-columns:1fr 1fr 50px}.custom-form .btn{border-radius:1px}.selected-card{border-radius:1px;border-color:var(--line)}.selected-card strong{font:600 12px Georgia,serif}.selected-card small{font:10px 'Segoe UI',Arial,sans-serif}.selected-card .mini-emoji{display:block;width:28px;height:28px;object-fit:contain}.selected-card button{border-radius:0}.selected-card button.style-this-icon{border:1px solid #98cddd;background:#e9f8ff;color:#006786}.file-button{border-radius:1px;border-color:#0088b0;color:#006786}
.preview-title h2{font:600 21px Georgia,serif}.preview-desc,.preview-hint{font-family:'Segoe UI',Arial,sans-serif}.sheet-preview{box-shadow:5px 6px 0 #0088b0,-3px -3px 0 #d6006c}.mock-card{border-radius:0}.mock-card img.emoji{width:30px;height:30px;object-fit:contain;flex:none}.mock-grid.grid-9 .mock-card img.emoji{width:19px;height:19px}.mock-grid.grid-2 .mock-card img.emoji{width:43px;height:43px}.mock-card strong{font-family:Georgia,serif}.preview-stats strong{font-family:Georgia,serif;font-size:23px}.print-btn{border-radius:1px}.status{color:#006786}
.icon-studio{border:1px solid #a2d5e7;background:#f1faff;margin:18px 0;padding:0}.icon-studio>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:5px;padding:14px 12px;font:700 12px 'Segoe UI',Arial,sans-serif;color:#004961;cursor:pointer}.icon-studio>summary::-webkit-details-marker{display:none}.icon-studio>summary::before{content:'▸';margin-right:5px;transition:transform .1s}.icon-studio[open]>summary::before{transform:rotate(90deg)}.icon-studio>summary span:first-child{flex:1}.details-hint{font:10px 'Segoe UI',Arial,sans-serif;color:#006786}.studio-caption{font:11px/1.55 'Segoe UI',Arial,sans-serif;margin:0;padding:0 12px 11px;color:#52656a}.icon-studio-inner{padding:14px 12px;background:#fff;border-top:1px solid #bbdce7}.icon-inspector{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:15px}.icon-inspector strong,.icon-inspector small{display:block}.icon-inspector strong{font:700 12px 'Segoe UI',Arial,sans-serif}.icon-inspector small{font:10px/1.5 'Segoe UI',Arial,sans-serif;color:#6c6866}.icon-live-preview{width:86px;height:86px;flex:none;display:grid;place-items:center;background:repeating-conic-gradient(#ececec 0% 25%,#fff 0% 50%) 50%/15px 15px;border:1px solid #d8d2ce}.live-icon-art{width:75px;height:75px;object-fit:contain}.icon-preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:9px 0 17px}.icon-preset-grid button{border:1px solid #d5d0ce;border-radius:0;background:#fff;min-height:35px;font:600 10px 'Segoe UI',Arial,sans-serif;padding:6px 3px;color:var(--ink)}.icon-preset-grid button.active{background:#006786;border-color:#006786;color:#fff}.icon-preset-grid button:hover{border-color:#0088b0}.icon-colors{border-top:1px solid var(--line);padding-top:12px}.icon-studio .field{margin-bottom:11px}.icon-studio .field input[type=range]{width:100%;accent-color:#0088b0}.icon-studio .field>span:has(output){display:flex;justify-content:space-between}.icon-studio .field output{color:#006786}.icon-studio .color-row{margin-bottom:9px}.icon-studio .color-row input{width:47px;height:28px;border:1px solid #d8d2ce}.studio-reset{width:100%;border:1px solid #d4cecc;border-radius:0;margin-top:7px}
.promise-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);margin-top:32px;background:#faf9f7}.promise-strip>div{padding:22px;border-right:1px solid var(--line)}.promise-strip>div:last-child{border-right:0}.promise-strip span{color:#006786;font:700 10px 'Segoe UI',Arial,sans-serif}.promise-strip strong{display:block;margin:9px 0;font:600 17px Georgia,serif}.promise-strip p{font:11px/1.65 'Segoe UI',Arial,sans-serif;color:#685f5d;margin:0}.site-footer{border-color:var(--line);font-family:'Segoe UI',Arial,sans-serif;color:#676160}
/* The identical raster icon is rendered in HTML preview and in print markup. */
.print-card img.card-emoji{display:block;width:26mm;height:26mm;object-fit:contain;flex:0 0 auto;margin-bottom:3mm}
.sheet.layout-2 .print-card img.card-emoji{width:39mm;height:39mm}.sheet.layout-9 .print-card img.card-emoji{width:17mm;height:17mm;margin-bottom:2mm}.sheet.layout-9 .print-card.very-long img.card-emoji{width:12mm;height:12mm}
@media(max-width:1350px){.workgrid{grid-template-columns:265px minmax(360px,1fr)}.preview-panel{grid-column:1/-1}.preview-sticky{display:grid;grid-template-columns:1fr 280px;gap:0 23px}.preview-title,.preview-desc{grid-column:1}.sheet-preview{grid-column:2;grid-row:1/7}.preview-stats,.print-btn,.preview-calibration,.preview-hint,.status{grid-column:1}}
@media(max-width:1000px){.site-nav{gap:12px}.top-note{display:none}.intro{grid-template-columns:1fr 1fr}.intro h1{font-size:43px}.hero-composition{gap:16px}.hero-card{width:137px;height:178px}.hero-symbol{font-size:42px}.hero-card strong{font-size:22px}}
@media(max-width:810px){.topbar{gap:10px}.site-nav{display:none}.workspace{padding:0 18px 28px}.intro{grid-template-columns:1fr;min-height:auto}.intro-copy{padding:40px 0}.intro h1{font-size:clamp(38px,8vw,54px)}.hero-composition{border:1px solid var(--line);min-height:295px}.hero-card{height:190px}.workgrid{grid-template-columns:1fr}.content-area{padding:17px}.preview-panel{grid-column:auto}.preview-sticky{display:block}.sheet-preview{max-width:330px;margin:0 auto}.word-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:390px}.project-summary{padding-top:26px}.summary-meta{margin-left:0}.promise-strip{grid-template-columns:1fr}.promise-strip>div{border-right:0;border-bottom:1px solid var(--line)}.promise-strip>div:last-child{border:0}}
@media(max-width:480px){.topbar{padding:0 16px}.brand{font-size:16px}.brand-mark{width:30px}.top-actions{gap:4px}.top-actions #reset{display:none}.top-actions .btn{padding:9px;font-size:10px}.intro p{font-size:13px}.hero-actions{width:100%}.hero-actions .btn{flex:1;gap:5px;padding:12px 7px;font-size:11px}.hero-proof{font-size:8px}.hero-composition{min-height:254px;gap:17px;padding:32px 14px}.hero-card{width:115px;height:159px;gap:6px;padding:10px}.hero-symbol{font-size:38px}.hero-card strong{font-size:19px}.hero-print-label,.hero-print-bottom{font-size:8px;left:12px;right:12px}.project-summary strong{font-size:18px}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.library-controls{grid-template-columns:1fr}.custom-form{grid-template-columns:1fr 1fr 48px}.site-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
@media print{.app-shell{display:none!important}html,body{background:#fff!important}.sheet-preview{box-shadow:none!important}.sheet{box-shadow:none!important}}