:root{--cyan:#00AEEF;--ink:#344b52;--muted:#758a90;--line:#d8e6e9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:#f1f5f5;color:var(--ink);font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',sans-serif}main{max-width:1680px;padding:48px 48px 30px;margin:auto}a{color:#00AEEF}button,summary{font:inherit}.page-nav{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:32px;background:#fffffff5;border-bottom:1px solid var(--line);padding:19px 24px;font-size:12px;backdrop-filter:blur(10px)}.page-nav a{text-decoration:none}.page-nav a:last-child{margin-left:30px}.mast{display:flex;justify-content:space-between;align-items:center;margin-bottom:74px;gap:24px}.identity{display:grid;grid-template-columns:136px 312px;width:448px;height:80px;border:1px solid var(--cyan);color:var(--cyan);flex:none}.logo{display:grid;place-content:center;font-size:19px;letter-spacing:1.5px;font-weight:300}.project{border-left:1px solid var(--cyan);display:grid;grid-template-rows:27px 1fr}.project>div{padding:6px 18px;font-size:12px;border-bottom:1px solid var(--cyan)}.project strong{font-size:20px;font-weight:300;display:flex;align-items:center;padding:0 18px}.meta{text-align:right;color:var(--cyan);border-right:2px solid var(--cyan);padding-right:16px;font-size:11px;line-height:2;letter-spacing:1.5px}.meta small{color:var(--muted);letter-spacing:0}.section-head{margin:0 0 30px}.section-head>span,.eyebrow{font-size:11px;color:var(--cyan);letter-spacing:1.7px}.section-head h1{font-size:28px;font-weight:400;letter-spacing:1px;margin:12px 0 16px}.section-head h2{font-size:22px;font-weight:400;margin:12px 0 16px}.section-head p{font-size:13px;line-height:1.9;color:var(--muted)}main>section{margin-bottom:90px}.tabs{display:flex;gap:10px;margin-bottom:24px}.tabs button{padding:15px 25px;border:1px solid var(--line);background:white;color:var(--muted);font-size:13px;cursor:pointer}.tabs [aria-selected=true]{background:var(--cyan);border-color:var(--cyan);color:white}.presentation-panel{background:white;padding:34px;margin-bottom:32px;border-top:2px solid var(--cyan)}.eyebrow{margin:0 0 14px}.card-head{display:flex;align-items:baseline;gap:22px;margin-bottom:24px}.card-head h2{font-weight:300;color:var(--cyan);font-size:30px;margin:0}.card-head span{font-size:15px}.design-pair{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:30px;align-items:start}.design-pair img{max-width:100%;height:auto;display:block}.label{font-size:10px;color:var(--muted);letter-spacing:1px;margin:0 0 12px}.label em{font-style:normal}.pc-design>.image{width:100%;border:1px solid var(--line)}.phone-block{padding:12px;background:#f5f8f8}.phone-block .label{font-size:9px;letter-spacing:.5px}.sp-menu{width:100%}.notes{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}.concept{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px}.concept-label{grid-column:1/-1;color:var(--cyan);font-size:10px;letter-spacing:1.4px;margin-bottom:12px}.concept h3{font-size:14px;font-weight:500;margin:0 0 8px;line-height:1.8;grid-row:2}.concept p{font-size:12px;line-height:1.9;color:#61777d;margin:0;grid-row:3}.discussion{margin-top:20px;font-size:12px;color:#71868c;line-height:1.9}.discussion b{font-size:10px;color:var(--cyan);font-weight:400;letter-spacing:1px;margin-right:15px}.instagram-patterns{margin-top:54px}.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}.pattern-grid article{min-width:0}.pattern-grid h3{font-size:17px;font-weight:400;color:var(--cyan)}.pattern-grid p{font-size:13px;line-height:1.9;min-height:76px}.entire-menu{width:320px;max-width:100%;display:block;margin:24px auto;border:1px solid var(--line)}.callout{color:var(--cyan);font-size:12px;text-align:center;border-top:1px solid var(--cyan);padding-top:14px}.group-title{font-size:20px;font-weight:400;color:var(--cyan);border-bottom:1px solid var(--line);padding-bottom:18px;margin:45px 0 24px}.brand-card .design-pair{grid-template-columns:minmax(0,1fr) 185px}.sp-detail{display:block;width:100%;height:auto;background:white}.missing-sp{color:var(--muted);text-align:center;font-size:12px;padding:35px 0}.full-pair{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:32px;padding-top:22px}.full-pair img{max-width:100%}details{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}summary{font-size:12px;color:#00AEEF;cursor:pointer}.category-sheet img{width:100%;display:block}.hint{font-size:12px;color:var(--muted)}footer{text-align:right;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:24px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #156f81;outline-offset:4px}[hidden]{display:none!important}@media(max-width:850px){main{padding:30px 20px}.mast{align-items:start;flex-direction:column;margin-bottom:40px}.meta{display:none}.presentation-panel{padding:22px}.design-pair,.brand-card .design-pair{grid-template-columns:minmax(0,1fr) 115px;gap:16px}.concept{column-gap:18px}.page-nav{gap:16px;font-size:10px}.page-nav a:last-child{margin-left:0}.pattern-grid{gap:25px}.pattern-grid p{min-height:110px}.identity{max-width:100%;grid-template-columns:30% 70%}}@media(max-width:560px){main{padding:24px 12px}.identity{width:100%;height:70px}.project strong{font-size:17px}.page-nav{gap:12px;padding:15px 8px;flex-wrap:wrap}.tabs button{padding:12px;font-size:11px}.presentation-panel{padding:18px}.design-pair,.brand-card .design-pair{grid-template-columns:1fr}.phone-block{max-width:150px}.concept{display:block}.concept h3{margin-top:15px}.pattern-grid{grid-template-columns:1fr}.pattern-grid p{min-height:0}.full-pair{grid-template-columns:1fr 100px}.section-head h2{font-size:20px}.section-head h1{font-size:25px}.card-head{gap:16px}.card-head span{font-size:12px}}@media print{.page-nav,.tabs,details,.hint{display:none}[hidden]{display:block!important}body{background:white}.presentation-panel{break-before:page}main{padding:0}.category-sheet{break-before:page}}
/* Projection review: balanced device sizes and persistent comparison controls. */
.tabs{position:sticky;top:var(--nav-height,56px);z-index:4;background:#f1f5f5ed;backdrop-filter:blur(12px);padding:12px 0;border-bottom:1px solid var(--line)}
.menu-card .design-pair{grid-template-columns:minmax(0,2.6fr) minmax(220px,1fr);max-width:1100px;margin:auto;gap:36px}
.brand-card .design-pair{grid-template-columns:minmax(0,2.8fr) minmax(220px,1fr);gap:36px}.focus svg{width:100%;height:auto;display:block;border:1px solid var(--line)}
.pattern-grid{gap:36px}.pattern-devices{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(125px,1fr);gap:18px;align-items:start}.pattern-pc{width:100%;border:1px solid var(--line)}.pattern-devices .entire-menu{width:100%;margin:0}.pattern-devices .label{min-height:0;font-size:9px;margin:0 0 10px}.pattern-grid h3{min-height:42px}.callout{margin-top:24px}
@media(max-width:850px){.menu-card .design-pair,.brand-card .design-pair{grid-template-columns:minmax(0,2.4fr) minmax(155px,1fr);gap:20px}.pattern-grid{grid-template-columns:1fr}.pattern-devices{grid-template-columns:minmax(0,2.5fr) minmax(155px,1fr)}}
@media(max-width:560px){.menu-card .design-pair,.brand-card .design-pair{grid-template-columns:1fr}.phone-block{max-width:230px}.pattern-devices{grid-template-columns:1fr}.pattern-devices .entire-menu{width:230px}.tabs{padding:8px 0}.tabs button{padding:11px 8px;flex:1}.pattern-grid h3{min-height:0}}
@media print{.tabs{display:none}}

html{overflow-anchor:none}

/* Annotated crop comparison: same device scale across 01 and 02. */
.instagram-patterns .pattern-devices{display:block}.instagram-patterns .pattern-devices>div+div{margin:26px auto 0;width:min(100%,400px)}.crop-pc{aspect-ratio:875/565}.crop-pc svg{display:block;width:100%;height:auto}.crop-sp{display:block;width:100%;height:auto}.instagram-patterns .pattern-grid{align-items:start}.instagram-patterns .pattern-devices .label{font-size:10px;margin-bottom:14px}@media(max-width:850px) and (min-width:650px){.instagram-patterns .pattern-grid{grid-template-columns:1fr 1fr;gap:22px}}

.card-head:has(.classification-note){flex-wrap:wrap}.card-head .classification-note{font-size:14px;color:var(--cyan);line-height:1.7}@media(max-width:650px){.card-head .classification-note{flex-basis:100%;font-size:12px}}

/* Refreshed cyan and client-first proposal identity. */
.identity{width:550px;grid-template-columns:136px 414px}.logo{font-size:27px}.project strong{font-size:21px;white-space:nowrap}.meta{font-size:15px;letter-spacing:1px}@media(max-width:850px){.identity{grid-template-columns:25% 75%;max-width:100%}}@media(max-width:560px){.logo{font-size:23px}.project strong{font-size:14px;padding:0 10px}.project>div{padding-left:10px}.meta{display:block;font-size:12px}}

.copy-headline{margin:8px 0 35px;text-align:center;color:#333}.copy-headline>span{font-size:18px;color:#D00035}.copy-headline h2{font-size:26px;margin:7px 0;font-weight:600}.copy-headline strong{color:#D00035}.copy-text-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:38px}.copy-text-grid article{border-top:1px solid var(--cyan);padding-top:17px}.copy-text-grid h3{font-size:18px;line-height:1.7;margin:0 0 15px;color:#344b52}.copy-text-grid p{font-size:16px;line-height:1.95;margin:0;color:#344b52}.copy-state-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.copy-state-grid figure{margin:0}.copy-state-grid figcaption{font-size:13px;color:var(--cyan);margin-bottom:14px}.copy-state-grid img{width:100%;display:block;border:1px solid var(--line)}@media(max-width:850px){.copy-text-grid,.copy-state-grid{grid-template-columns:1fr}.copy-text-grid p{font-size:15px}}@media print{#category-copy{break-before:page}.copy-proposal{break-before:auto}}
